CSS3 Gradient 그라데이션효과

포토샵에서나 쓸수 있었던 그라데이션 효과를 CSS만으로 웹에서 표현이 가능합니다. CSS3에서 추가된 기능으로 최신 브라우저 익스플로러 10이상 표현이 가능합니다. 따라서 하위 브라우저 버전에서는 사용이 불가능한점 참고하시고 사용해주시면 되겠습니다.

표현방식은 라인방식과 원형방식 두가지가 있습니다.

라인방식이 많이 쓰이긴 하지만 필요에 따라 원형도 사용되기도 합니다.

하지만 하위 브라우저들 때문에 많이 사용하기 껄끄러운면도 많습니다.

linear-gradient > 일반적인 라인방식 두개의 컬러를 지정하여 지정영역만큼 그라데이션이 표현됩니다.

radial-gradient > 원형방식으로 지정영역만큼 그라데이션이 표현됩니다.

repeating-linear-gradient > 같은 라인방식이지만 구간반복으로 표현됩니다.

repeating-radial-gradient > 같은 원형방식이지만 구간반복으로 표현됩니다.

예제 linear-gradient

background: linear-gradient(#000, #ccc);

예제 radial-gradient

background: radial-gradient(#000, #ccc);

위와같이 라인그라데이션은 기본 위에서 아래로 그라데이션이 적용됩니다. 그럼 좌우는 어떻게 하는지 알아봅시다.

예제 linear-gradient 좌우

background: linear-gradient(to right, #000, #ccc);

to right 방향을 지정해주고 left색, right색 순서로 적용해 주시면 됩니다.

상하좌우 및 대각선도 가능합니다.

예제 linear-gradient 대각선

background: linear-gradient(to bottom right, #000, #ccc);

↘이 방향으로 그라데이션이 입혀집니다.

여러색상을 사용하는 방법도 있습니다.

background: linear-gradient(to right, #ff0000, #ff00d8, #3c00ff, #00deff, #00ff2a, #f6ff00, #ff6c00);

컬러를 순서 그대로 쭉 나열하게 되면 그대로 컬러가 그라데이션 됩니다.

예제로 그라데이션 버튼 만들어 보겠습니다.

.button {background:linear-gradient(#e3e3e3, #fcfcfc); color: black; border-radius: 10px;} .button:hover {background: linear-gradient(#fcfcfc, #e3e3e3); color: black; border-radius: 10px;}

위와같이 :hover 시에 컬러를 바꿔주면 멋진 버튼을 만드실 수 있습니다.

그렇게 많이 쓰이지는 않지만 이미지를 사용하지 않아도 충분한 그라데이션 효과를 css로 줄 수 있어 여러 사용자분들이 편리함을 느꼈으면 좋겠습니다.