CSS - 그라디언트 예제

선형 그라디언트와 반지름형 그라디언트 예제를 볼 수 있습니다.

선형 그라디언트 예제

두 가지의 색상으로 그라디언트 예제입니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, 
    center top, center bottom, from(red), to(yellow));

  background: -webkit-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

왼쪽에서 오른쪽 방향으로 그라디언트합니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, 
    left center, right center, from(red), to(yellow));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: -webkit-linear-gradient(left, red, yellow);
  background: linear-gradient(to right, red, yellow);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

대각선으로도 그라디언트할 수 있습니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, 
    left top, right bottom, from(red), to(yellow));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: -webkit-linear-gradient(left top, red, yellow);
  background: linear-gradient(to right bottom, red, yellow);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

위 예제를 각도를 이용해 대각선으로 그라디언트합니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, 
    left top, right bottom, from(red), to(yellow));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: -webkit-linear-gradient(-45deg, red, yellow);
  background: linear-gradient(135deg, red, yellow);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

다음은 두 개 이상의 색상으로 그라디언트합니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, left top, right bottom,
  from(red), color-stop(40%, yellow), color-stop(70%, blue), to(#ccc));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: -webkit-linear-gradient(-45deg, red, yellow, blue, #ccc);
  background: linear-gradient(135deg, red, yellow, blue, #ccc);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

다음은 그라디언트를 여러 개 지정한 결과입니다.

<style>
#gradient {
  background: linear-gradient(217deg, 
    rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

다음은 정지점을 이용한 결과입니다. 50% 까지는 완전히 #349aed 색상으로 채우고, 나머지 50%~100%까지 #34d8ed 로 색상이 전환되는 부분입니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, left top, right bottom,
    from(#349aed), to(#34d8ed));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: 
    -webkit-linear-gradient(-45deg, #349aed 50%, #34d8ed 100%);
  background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

두 개의 정지 지점을 지정하면 아주 색다른 그라디언트를 그릴 수 있습니다.

<style>
#gradient {
  /* 구 webkit 사용자라면 */
  background: -webkit-gradient(linear, left center, right center,
      from(white), color-stop(50%, blue), color-stop(50%, purple),
      to(white));
  
  /* 프리픽스를 붙인 것과 붙이지 않는 서식은 각도가 다릅니다. */
  background: -webkit-linear-gradient(left, white,
       blue 50%, purple 50%, white);
  background:linear-gradient(to right, white,
       blue 50%, purple 50%, white);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>

반지름형 그라디언트 예제

두 가지의 색상으로 그라디언트를 그립니다.

<style>
#gradient {
  background: -webkit-radial-gradient(white, black);
  background:radial-gradient(white, black);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>

<style>
#gradient {
  background: -webkit-radial-gradient(white, green, black);
  background:radial-gradient(white, green, black);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>

두 정지 지점을 이용해 경계선을 그라디언트합니다.

<style>
#gradient {
  background: -webkit-radial-gradient(white, 
      yellow 20%, red 20%, black);
  background:radial-gradient(white, yellow 20%, red 20%, black);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>

<style>
#gradient {
  background: -webkit-radial-gradient(ellipse at top, #e66465, transparent),
    -webkit-radial-gradient(ellipse at bottom, #4d9f0c, transparent);
  background: radial-gradient(ellipse at top, #e66465, transparent),
    radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>