CSS 그라디언트란?
그라디언트(Gradient)는 두 가지 이상의 색상이 서서히 전환되면서 자연스럽게 어우러지도록 표현하는 CSS 기법입니다. 이미지 파일 없이 코드만으로 부드러운 색상 전환 효과를 만들 수 있어 배경, 버튼, 배너 등 웹 디자인 전반에서 널리 활용됩니다.
그라디언트의 종류
CSS에서 제공하는 대표적인 그라디언트 유형은 다음과 같습니다.
- 선형 그라디언트(Linear Gradient) — 위, 아래, 왼쪽, 오른쪽 또는 대각선 방향으로 색상이 일직선을 따라 순차적으로 전환됩니다.
- 원형 그라디언트(Radial Gradient) — 지정한 중심점을 기준으로 바깥쪽으로 원 형태로 퍼지면서 색상이 전환됩니다.
원형 그라디언트 예제
다음은 원형 그라디언트를 실제로 적용한 예제입니다. 빨강(red)은 5%, 초록(green)은 15%, 분홍(pink)은 60% 지점에서 각각 색상이 전환되도록 설정했습니다.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>벤더 접두사(Vendor Prefix) 안내
예제 코드에 포함된 -webkit-, -o-, -moz- 접두사는 구버전 브라우저에서도 그라디언트가 정상적으로 동작하도록 하기 위한 호환성 코드입니다. 최신 브라우저에서는 표준 속성인 radial-gradient()만으로도 충분하지만, 다양한 환경을 지원해야 하는 경우에는 함께 작성해 주는 것이 좋습니다.