CSS로 그라데이션 배경색을 설정하는 방법

CSS로 그라데이션 배경색을 설정하려면 linear-gradient()를 추가해야 합니다. background에 기능 재산.

간단한 상자 클래스를 만들고 시도해 보겠습니다.

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(yellow, red);
}

결과:

선형 그래디언트 함수 내에서 색상을 재정렬하여 시작하고 끝나는 색상을 변경할 수 있습니다.

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

선형 그라데이션 각도/기울기 변경

위의 예에서 볼 수 있듯이 linear-gradient() 함수는 기본적으로 위에서 아래로 그라디언트를 만듭니다. 그라데이션 각도를 원하는 대로 쉽게 변경할 수 있습니다.

예를 들어 다음은 45도 기울어진 선형 그래디언트입니다.

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

결과:

0에서 360까지의 모든 각도를 사용할 수 있습니다.

그라디언트에 HEX, RGB 또는 RGBa 사용

선형 그라디언트에 HEX, RGB 및 RGBa 색상 모델을 사용할 수 있습니다. RGBa는 선형 그래디언트에서 알파 채널(투명도용)을 사용할 수 있다는 점에서 가장 유연한 것입니다.

아래에서 볼 수 있듯이 RGBa를 사용할 때 그라디언트를 사용하여 원하는 만큼 창의력을 발휘할 수 있습니다.

위의 선형 그래디언트 예제에 대한 CSS는 다음과 같습니다.

{
    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%);
}