CSS로 그라데이션 배경색 설정하는 방법 (linear-gradient 완벽 가이드)

CSS로 그라데이션 배경색을 설정하려면 background 속성에 linear-gradient() 함수를 추가하면 됩니다. 별도의 이미지 파일 없이 코드 한 줄로 부드러운 색상 전환 효과를 만들 수 있어 웹 디자인에서 매우 자주 사용됩니다.

간단한 박스 클래스를 만들어 직접 확인해 보겠습니다.

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

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

실행 결과:

linear-gradient() 함수 안에서 색상의 순서를 바꾸면 그라데이션이 시작되는 색과 끝나는 색을 자유롭게 변경할 수 있습니다.

/* 빨간색으로 시작해서 노란색으로 끝나는 그라데이션 */
 background: linear-gradient(red, yellow);

그라데이션 각도(기울기) 변경하기

위 예시에서 볼 수 있듯이 linear-gradient() 함수는 기본적으로 위에서 아래로 향하는 그라데이션을 생성합니다. 하지만 각도 값만 지정하면 원하는 방향으로 손쉽게 조절할 수 있습니다.

예를 들어, 45도로 기울어진 선형 그라데이션은 다음과 같이 작성합니다.

/* 노란색으로 시작해서 빨간색으로 끝나는 그라데이션 */
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%);
}