CSS3의 linear-gradient() 함수를 사용하면 두 개 이상의 색상을 자유롭게 조합해 다채로운 그라디언트 효과를 손쉽게 구현할 수 있습니다. 색상을 쉼표(,)로 나열하기만 하면 브라우저가 위에서 아래로 자동으로 색을 혼합해 줍니다.
멀티 컬러 그라디언트 예제
아래 코드는 빨강, 주황, 노랑, 빨강, 파랑, 초록, 분홍까지 일곱 가지 색상이 부드럽게 이어지는 그라디언트를 만드는 예제입니다.
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green, pink);
background: linear-gradient(red, orange, yellow, red, blue, green, pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>코드 설명
1. 그라디언트 적용 대상 요소
<div id="grad2"> 요소에 height: 100px;로 높이를 지정했습니다. 그라디언트 배경은 요소의 크기가 있어야 화면에 나타나므로, 높이 또는 너비를 반드시 설정해 주세요.
2. 벤더 프리픽스(Vendor Prefix)
예제에는 여러 줄의 background 속성이 반복되는데, 이는 구형 브라우저와의 호환성을 위한 것입니다.
-webkit-: Chrome, Safari 등 WebKit 기반 브라우저용-o-: 구버전 Opera용-moz-: Firefox용- 접두사 없는
linear-gradient(): 최신 표준 문법
현재 모든 주요 브라우저는 표준 문법을 지원하므로 실무에서는 마지막 한 줄만 사용해도 무방하지만, 오래된 브라우저까지 고려한다면 프리픽스를 함께 작성하는 것이 안전합니다.
3. 색상 순서와 방향
색상은 왼쪽부터 차례대로 위에서 아래 방향(top → bottom)으로 적용됩니다. 방향을 바꾸고 싶다면 첫 번째 인수에 각도를 추가할 수 있습니다. 예를 들어 linear-gradient(to right, red, blue)처럼 작성하면 왼쪽에서 오른쪽으로 그라디언트가 흐르고, 45deg와 같은 각도 값도 사용할 수 있습니다.
색상 위치(Color Stop) 지정하기
각 색상 뒤에 백분율이나 픽셀 값을 붙이면 해당 색상이 시작되고 끝나는 지점을 세밀하게 제어할 수 있습니다.
background: linear-gradient(red 0%, yellow 50%, green 100%);
위 코드는 전체 영역의 절반 지점까지 빨강에서 노랑으로, 이후 초록으로 변화하는 그라디언트를 만듭니다. 멀티 컬러 그라디언트에도 동일하게 적용할 수 있으니 원하는 디자인에 맞게 활용해 보세요.