CSS linear-gradient() 함수란?
linear-gradient() 함수는 CSS에서 선형 그라디언트(Linear Gradient)를 정의하여 요소의 배경 이미지로 활용할 수 있게 해주는 함수입니다. 두 개 이상의 색상이 지정된 방향을 따라 부드럽게 전환되는 효과를 이미지 파일 없이 순수 CSS만으로 구현할 수 있습니다.
기본 문법
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
위 문법에서 direction은 그라디언트가 시작되는 위치와 진행 방향을 지정하며, 그 뒤에 나열되는 색상 정지점(color stop)들이 순서대로 매끄러운 색상 전환을 형성합니다.
예제 1: 대각선 방향 그라디언트 배경
다음 예제는 to bottom right 키워드를 사용해 왼쪽 위에서 오른쪽 아래로 흐르는 빨강-파랑 그라디언트를 div 요소의 배경으로 적용한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-image: linear-gradient(to bottom right, red , blue);
position: absolute;
right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
이 코드를 실행하면 흰색 텍스트가 빨강에서 파랑으로 자연스럽게 이어지는 대각선 그라디언트 배경 위에 표시됩니다.
예제 2: 무지개색 다중 색상 그라디언트
linear-gradient() 함수에는 세 가지 이상의 색상도 자유롭게 지정할 수 있습니다. 아래 예제는 노랑, 주황, 초록, 파랑, 남색, 보라 등 여러 색상을 to right 방향으로 배치하여 페이지 전체에 무지개 그라디언트 배경을 만든 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
이처럼 색상 정지점을 여러 개 추가하면 더욱 풍부하고 화려한 그라디언트 효과를 연출할 수 있습니다.
마무리 정리
linear-gradient() 함수는 별도의 이미지 파일 없이 CSS만으로 다채로운 배경 효과를 만들 수 있는 매우 유용한 도구입니다. 방향 키워드(to top, to right, to bottom right 등)나 각도 값(45deg, 90deg 등)을 조합하고, 색상 정지점의 개수와 위치를 자유롭게 조절하여 원하는 디자인을 손쉽게 구현해 보세요.