Web/HTML | CSS|JAVASCRIPT
Linear Gradients 그라데이션 적용하기(CSS)
싸공
2020. 7. 27. 12:51
<!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, ....);