배경으로 예쁜 그라디언트 넣기(무료 그라디언트 사이트)

그라디언트를 잘 사용하면 세련된 느낌을 줄 수 있죠. 물론 제대로 사용했을 때 말이죠. 다양한 그라디언트를 보고 그대로 가져다 쓸 수 있는 사이트를 소개합니다.

 

Dusty Grass

Night Fade

Strong Bliss

Burning Orange

 

 

아래 사이트를 방문해서 그라디언트를 가져다 쓸 수 있습니다.

Free Gradients Collection by itmeo.com

uiGradients - Beautiful colored gradients

마음에 드는 그라디언트를 선택해서 복사하기 버튼으로 CSS를 복사해 올 수 있습니다.

 

 

---

사용방법은 다음과 같습니다.

<div style="background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); width: 100%; height: 250px;">
</div>

to top은 그라디언트 방향을 아래에서 위로, to bottom은 아래로, to right은 오른쪽으로, to left는 왼쪽으로 갑니다. 그 다음에는 색상코드와 위치(%)를 표시합니다. 여러개의 색과 위치가 들어갈 수 있습니다. 

 

아래 사이트에서 마음에 드는 그라디언트를 골라보세요! (첫번째 사이트가 좀 더 단순한 css 코드를 복사할 수 있습니다!)

 

---

 

추가로 글씨에 그라디언트를 입히고 싶다면?

 

GRADIENT

<style>
  .textGradient {
  	background: linear-gradient(to right, #FFF, #000);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	font-size:140px;
	width:700px;
  }
</style>
  
<div class=textGradient>GRADIENT</div>

 

※ 표준코드가 아니므로 브라우저에 따라 작동되지 않을 수 있습니다!