CSS3 선형 그라디언트로 두 가지 이상의 색상 배치하기

선형 그라디언트(Linear Gradient)는 두 가지 이상의 색상을 선형 형태로 배치하는 CSS3 기능입니다. 색상 사이가 부드럽게 전환되는 시각적 효과를 만들어 주며, 버튼·배너·페이지 배경 등 다양한 웹 요소에 폭넓게 활용됩니다.

예제

CSS3에서 선형 그라디언트를 구현하려면 아래 코드를 실행해 보세요.

<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>

출력 결과

CSS3 선형 그라디언트로 두 가지 이상의 색상 배치하기

코드 설명

위 예제에서는 #grad1 요소에 높이 100px를 지정하고, 핑크(pink)에서 초록(green)으로 이어지는 선형 그라디언트 배경을 적용했습니다. -webkit-, -moz-, -o- 접두사는 Chrome·Safari, Firefox, Opera 등 구형 브라우저와의 호환성을 위해 함께 작성된 것으로, 최신 브라우저에서는 표준 속성인 linear-gradient만으로도 정상적으로 동작합니다.