CSS 선형 그라디언트란?
CSS의 linear-gradient() 함수는 두 개 이상의 색상이 지정된 방향으로 부드럽게 전환되는 그라디언트 효과를 만들어 줍니다. 기본적으로는 두 가지 색상으로 충분하지만, 색상 정지점(color stop)을 여러 개 추가하면 훨씬 풍부하고 입체적인 배경을 연출할 수 있습니다.
다중 색상 정지점 사용 예제
아래 예제에서는 파란색, 주황색, 노란색, 회색 네 가지 색상을 하나의 선형 그라디언트에 적용했습니다. 각 색상은 위에서 아래로 순서대로 자연스럽게 이어집니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
background: linear-gradient(blue, orange, yellow, gray);
}
</style>
</head>
<body>
<h2>Linear Gradient</h2>
<div id = "demo">Mutiple Color Stops</div><br>
</body>
</html>코드 설명
background 속성에 linear-gradient(blue, orange, yellow, gray)처럼 원하는 색상을 쉼표로 구분해 나열하면 됩니다. 별도의 위치 값을 지정하지 않으면 브라우저가 각 색상을 요소의 높이를 기준으로 균등한 간격으로 배치합니다.
특정 위치에 색상이 나타나도록 조절하고 싶다면 백분율이나 픽셀 값을 함께 지정할 수 있습니다. 예를 들어 linear-gradient(blue 0%, orange 40%, yellow 70%, gray 100%)와 같이 작성하면 각 색상의 전환 지점을 세밀하게 제어할 수 있어 더욱 정교한 디자인이 가능합니다.