<!DOCTYPE html>
<html>
<head>
<style>
div{
float: left;
width: 200px;
height: 200px;
margin: 5px;
}
.grad1 {
background-color: red;
background-image: linear-gradient(red, yellow);
}
.grad2 {
background-color: red;
background-image: linear-gradient(to left, green, blue);
}
.grad3 {
background-color: red;
background-image: linear-gradient(to bottom right, red, yellow);
}
.grad4 {
background-color: red;
background-image: linear-gradient(red, yellow, blue);
}
.grad5 {
background-color: red;
background-image: linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
<div class="grad4"></div>
<div class="grad5"></div>
</body>
</html>
background-image: linear-gradient(방향, 색상1, 색상2, ....);
'Web > HTML | CSS|JAVASCRIPT' 카테고리의 다른 글
| 폰트 어썸(Font Awesome) 사용법 (0) | 2020.07.28 |
|---|---|
| overflow 정리(CSS) (0) | 2020.07.27 |
| opacity 정리(CSS) (0) | 2020.07.27 |
| Shadow 정리(CSS) (0) | 2020.07.27 |
| border-radius 정리(CSS) (0) | 2020.07.27 |