CSS3의 linear-gradient 함수를 사용하면 요소의 배경에 부드러운 색상 전환 효과를 손쉽게 적용할 수 있습니다. 이 글에서는 색상이 왼쪽에서 오른쪽으로 자연스럽게 변하는 가로 방향 그라데이션을 만드는 방법을 소개합니다.
핵심 문법
왼쪽에서 오른쪽으로 흐르는 그라데이션은 linear-gradient(to right, 시작색, 끝색) 형태로 작성합니다. 아래 예제에서는 빨간색(red)에서 파란색(blue)으로 전환되는 그라데이션을 적용했습니다.
예제 코드
아래 코드를 실행하면 빨강에서 파랑으로 이어지는 가로 그라데이션이 화면에 나타납니다.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>코드 설명
- -webkit-linear-gradient: Safari 및 구버전 Chrome 등 WebKit 기반 브라우저를 위한 접두사입니다.
- -o-linear-gradient: 구버전 Opera 브라우저를 위한 접두사입니다.
- -moz-linear-gradient: 구버전 Firefox를 위한 접두사입니다.
- linear-gradient(to right, ...): 표준 문법으로, 현재 대부분의 최신 브라우저에서 지원됩니다.
예전에는 브라우저 호환성을 위해 여러 벤더 접두사를 함께 작성해야 했지만, 현재는 표준인 linear-gradient(to right, red, blue)만 사용해도 Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 모두 정상적으로 동작합니다.
응용 팁
색상을 세 개 이상 지정하면 다단계 그라데이션도 만들 수 있습니다. 예를 들어 linear-gradient(to right, red, yellow, blue)처럼 작성하면 빨강 → 노랑 → 파랑 순서로 색이 전환됩니다. 또한 to right 대신 각도(예: 45deg)나 to bottom right 같은 키워드를 사용하면 원하는 방향으로 자유롭게 조절할 수 있습니다.