CSS3 선형 그라디언트란?
선형 그라디언트(Linear Gradient)는 두 개 이상의 색상을 위에서 아래로, 왼쪽에서 오른쪽으로 하는 등 일정한 직선 방향으로 자연스럽게 배치하는 CSS3 기법입니다. 이미지 파일 없이도 부드러운 색상 전환 효과를 만들 수 있어 웹 디자인에서 매우 널리 활용됩니다.
선형 그라디언트는 background 속성에 linear-gradient() 함수를 사용하여 적용하며, 별도의 방향을 지정하지 않으면 기본적으로 위에서 아래로(top to bottom) 색상이 흐르는 형태가 됩니다.
예제 코드
다음 예제는 분홍색(pink)에서 초록색(green)으로 변하는 선형 그라디언트를 구현하는 코드입니다.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1">
</div>
</body>
</html>코드 설명
- -webkit-linear-gradient: Chrome, Safari 등 WebKit 기반 브라우저를 위한 접두사입니다.
- -o-linear-gradient: 구버전 Opera 브라우저를 위한 접두사입니다.
- -moz-linear-gradient: Firefox 브라우저를 위한 접두사입니다.
- linear-gradient: W3C 표준 문법으로, 모든 최신 브라우저에서 지원합니다.
이처럼 여러 벤더 접두사를 함께 작성하면 다양한 브라우저 환경에서도 동일하게 그라디언트가 표시됩니다. 다만 최신 브라우저에서는 표준 문법인 linear-gradient()만 사용해도 충분합니다.
그라디언트 방향 지정하기
기본 방향 외에도 키워드나 각도를 사용해 원하는 방향을 자유롭게 지정할 수 있습니다.
/* 왼쪽에서 오른쪽으로 */ background: linear-gradient(to right, pink, green); /* 대각선 방향 (왼쪽 위 → 오른쪽 아래) */ background: linear-gradient(to bottom right, pink, green); /* 각도 지정 (45도) */ background: linear-gradient(45deg, pink, green);
마무리
선형 그라디언트는 버튼, 배너, 배경 화면 등 다양한 UI 요소에 세련된 느낌을 더하는 강력한 도구입니다. 색상을 세 개 이상 지정하거나 색상 위치(%)를 조절하면 더욱 다채로운 효과를 연출할 수 있으니, 위 예제를 응용해 직접 실습해 보시기 바랍니다.