CSS3의 linear-gradient() 함수를 사용하면 요소에 위에서 아래로 자연스럽게 이어지는 선형 그라디언트를 손쉽게 적용할 수 있습니다. 기본적으로 linear-gradient는 별도의 방향 값을 지정하지 않으면 위에서 아래(top to bottom) 방향으로 색상이 채워집니다.
아래 예제 코드를 실행하면 핑크색에서 초록색으로 부드럽게 변하는 세로 방향 그라디언트를 확인할 수 있습니다.
예제 코드
<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>코드 설명
- height: 100px — 그라디언트가 화면에 나타나도록 div 요소의 높이를 지정합니다.
- -webkit-linear-gradient — Chrome, Safari 등 WebKit 기반 브라우저를 위한 접두사입니다.
- -o-linear-gradient — 구버전 Opera 브라우저를 위한 접두사입니다.
- -moz-linear-gradient — Firefox 브라우저를 위한 접두사입니다.
- linear-gradient — 표준 문법으로, 최신 브라우저 대부분에서 지원됩니다.
다양한 벤더 접두사를 함께 작성하면 구형 브라우저에서도 그라디언트가 정상적으로 표시되므로, 호환성을 위해 표준 문법과 함께 사용하는 것이 좋습니다.