[CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과

 

linear-gradient

linear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.

예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합니다.

색깔이 선처럼 쭉 이어지면서 자연스럽게 섞여 보이는 효과를 줄 수 있습니다.

 

0. 기본 문법

background: linear-gradient(방향, 색상1, 색상2, ...);

 

• 방향: 색상이 이동하는 방향(각도 또는 위치)
• 색상1, 색상2, ...: 그라디언트에 사용할 색상 (최소 2개 이상)

 

 

1. 방향 설정

1) 각도 사용

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, red, blue);
}

• 0deg: 아래 → 위 (Bottom to Top)
• 90deg: 왼쪽 → 오른쪽 (Left to Right)
• 180deg: 위 → 아래 (Top to Bottom)
• 270deg: 오른쪽 → 왼쪽 (Right to Left)

여기서 deg는 degree(각도)의 약자입니다.

 

2) 위치 키워드 사용

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(to top right, red, blue);
}

• to top: 아래에서 위로
• to bottom: 위에서 아래로 (기본값)
• to left: 오른쪽에서 왼쪽으로
• to right: 왼쪽에서 오른쪽으로
• to top right: 아래 왼쪽에서 위 오른쪽으로
• to bottom left: 위 오른쪽에서 아래 왼쪽으로

 

 

2. 색상 설정

1) 기본 색상 전환

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
}

red에서 blue로 부드럽게 전환됩니다.

 

2) 중간 색상 추가

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, yellow, blue);
}

red → yellow → blue 순서로 색상이 점진적으로 변합니다.

 

3) 색상 전환 위치 지정

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red 0%, yellow 20%, blue 100%);
}

• red가 시작(0%)에서 시작
• yellow가 중간(20%)에서 나타남
• blue가 끝(100%)에서 완전히 나타남

 

<div class="my-class"></div>

.my-class {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red 10px, yellow 20px, blue 200px);
}

비율 대신 픽셀 단위도 사용 가능합니다.