linear-gradient() CSS 함수를 사용하면 두 개 이상의 색상이 자연스럽게 이어지는 선형 그라디언트를 요소의 배경 이미지로 손쉽게 설정할 수 있습니다. 별도의 이미지 파일 없이도 시각적으로 풍부한 배경을 만들 수 있어 웹 디자인에서 널리 활용되는 기법입니다.
기본 문법
background: linear-gradient(방향 또는 각도, 색상1, 색상2, ...);
색상은 두 개 이상 지정할 수 있으며, 방향을 생략하면 기본값인 위에서 아래로(top to bottom) 그라디언트가 적용됩니다.
예제
다음 코드는 초록색(green) → 주황색(orange) → 밤색(maroon)으로 이어지는 선형 그라디언트를 div 요소의 배경으로 설정하는 예제입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 200px;
background: linear-gradient(green, orange, maroon);
}
</style>
</head>
<body>
<p>선형 그라디언트 배경 설정하기</p>
<div id = "demo"></div>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 높이 200px의 영역에 초록색에서 시작해 주황색을 거쳐 밤색으로 자연스럽게 변하는 세로 방향 그라디언트가 표시됩니다.
응용: 방향과 각도 지정하기
그라디언트의 진행 방향은 필요에 따라 다양하게 조절할 수 있습니다.
- to right — 왼쪽에서 오른쪽으로
- to bottom right — 왼쪽 위에서 오른쪽 아래로(대각선)
- 45deg — 원하는 각도로 지정
background: linear-gradient(to right, green, orange);
이처럼 linear-gradient() 함수 하나만으로도 방향, 각도, 색상 조합을 자유롭게 조정해 다채로운 배경 효과를 구현할 수 있습니다.