CSS의 linear-gradient() 함수를 사용하면 배경 이미지에 선형 그라디언트(Linear Gradient)를 손쉽게 적용할 수 있습니다. 두 개 이상의 색상이 지정된 방향을 따라 부드럽게 전환되는 효과를 만들어 주며, 이미지 파일 없이도 세련된 배경 디자인을 구현할 수 있습니다.
linear-gradient() 함수란?
linear-gradient()는 CSS3에서 도입된 함수로, 색상이 한 방향으로 점진적으로 변하는 그라디언트를 생성합니다. 기본 문법은 다음과 같습니다.
background: linear-gradient(방향, 색상1, 색상2, ...);
방향은 to right, to bottom left 같은 키워드나 45deg처럼 각도 값으로 지정할 수 있으며, 생략하면 기본적으로 위에서 아래(top → bottom) 방향으로 그라디언트가 형성됩니다.
예제
아래 코드를 실행하면 초록색에서 시작해 주황색, 밤색으로 자연스럽게 전환되는 그라디언트 배경을 확인할 수 있습니다.
<!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>다양한 활용 팁
그라디언트의 방향이나 색상 전환 지점을 조절하면 더욱 다채로운 효과를 낼 수 있습니다.
- 방향 지정:
linear-gradient(to right, green, orange)처럼 작성하면 왼쪽에서 오른쪽으로 색상이 전환됩니다. - 각도 사용:
linear-gradient(45deg, green, orange)처럼 각도를 지정해 대각선 방향의 그라디언트를 만들 수 있습니다. - 색상 정지점(color stop):
linear-gradient(green 20%, orange 80%)처럼 퍼센트를 지정하면 각 색상이 차지하는 구간을 세밀하게 조정할 수 있습니다.
이처럼 linear-gradient() 함수 하나만으로도 버튼, 배너, 섹션 배경 등 다양한 요소에 매력적인 시각 효과를 추가할 수 있습니다.