ProgrammingFrontendHTML, CSS

[CSS] 그라데이션 효과

, ,

linear-gradient : CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있다.

1
linear-gradient( direction, color1, color2, …, color3 );

direction에는 그라데이션 방향을 입력한다.

  • to bottom : 위에서 아래로 그라데이션을 만든다. (기본값)
  • to top : 아래에서 위로 그라데이션을 만든다.
  • to left : 오른쪽에서 왼쪽으로 그라데이션을 만든다.
  • to right : 왼쪽에서 오른쪽으로 그라데이션을 만든다.
  • ndeg : n 도의 방향으로 그라데이션을 만든다.

예시

1
2
3
4
.gradation_bar {
  width: 100%;
  background: linear-gradient(to right, #ff0000, orange, yellow, #00ff00, #0000ff, indigo, violet);
}

결과

참고

Share