CSS 다중 색상 정지점으로 선형 그라디언트 만드는 방법

개요

CSS의 linear-gradient() 함수를 사용하면 두 개 이상의 색상이 자연스럽게 이어지는 그라디언트 효과를 손쉽게 구현할 수 있습니다. 특히 색상 정지점(color stop)을 여러 개 지정하면 각 색상이 순서대로 부드럽게 전환되는 다채로운 배경을 만들 수 있습니다.

선형 그라디언트는 첫 번째 인자로 그라디언트가 진행되는 방향(예: to left, to right, to bottom 등)을 받고, 이후 나열된 색상들이 해당 방향으로 순차적으로 전환됩니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    height: 200px;
    width: 100%;
    display: inline-block;
    margin-right: 10px;
}
.linearGradient {
    background-image: linear-gradient(to left, orange, blue, green, pink, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using multiple color stops</h1>
<div class="linearGradient"></div>
</body>
</html>

코드 설명

linear-gradient(to left, orange, blue, green, pink, yellow) : 오른쪽에서 왼쪽 방향으로 주황색 → 파란색 → 초록색 → 분홍색 → 노란색 순서로 전환되는 그라디언트를 생성합니다.
height: 200px; width: 100% : div 요소의 높이와 너비를 지정하여 그라디언트가 화면 전체 폭에 걸쳐 나타나도록 설정했습니다.
background-image : 그라디언트는 배경 이미지처럼 적용되므로 background-image 속성에 값을 지정합니다.

실행 결과

위 코드를 실행하면 아래와 같이 여러 색상이 부드럽게 이어지는 선형 그라디언트가 화면에 출력됩니다.

CSS 다중 색상 정지점으로 선형 그라디언트 만드는 방법

마무리

이처럼 linear-gradient() 함수에 색상 정지점을 원하는 만큼 추가하기만 하면, 별도의 이미지 파일 없이도 풍부하고 세련된 그라디언트 배경을 CSS만으로 구현할 수 있습니다. 색상 사이에 백분율(예: blue 30%)을 지정하면 각 색상의 전환 위치까지 세밀하게 조절할 수 있으니 참고해 보세요.