[CSS] 그라데이션 효과

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

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

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

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

예시

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

결과

참고

• Ultimate CSS Gradient Generator