CSS 그라데이션

HTML 그라데이션

CSS 그라데이션, 그라데이션 스타일, 그라디언트

gradation, gradient

1 세로 (기본)

<style>
  div {
    height: 150px;
    background: -webkit-linear-gradient(red, yellow);
    background: -moz-linear-gradient(red, yellow);
    background: -o-linear-gradient(red, yellow);
    background: linear-gradient(red, yellow);
  }
</style>
<div>top to bottom</div>

2 가로

<style>
  div {
    height: 150px;
    background: -webkit-linear-gradient(left, red, yellow);
    background: -moz-linear-gradient(left, red, yellow);
    background: -o-linear-gradient(left, red, yellow);
    background: linear-gradient(to right, red, yellow);
  }
</style>
<div>left to right</div>

3 웹 도구

• http://www.colorzilla.com/gradient-editor/

이 사이트에서는 포토샵과 유사한 UI를 가지고 간편하게 CSS 코드를 만들 수 있다.

4 같이 보기

• CSS 투명 배경색
• CSS 텍스트 그라데이션
• CSS 그라이데이션 body에 적용하기
• SVG 그라데이션