- HTML 그라데이션
- CSS 그라데이션, 그라데이션 스타일, 그라디언트
- gradation, gradient
세로 (기본)
<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>
가로
<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>
웹 도구
이 사이트에서는 포토샵과 유사한 UI를 가지고 간편하게 CSS 코드를 만들 수 있다.