728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border-radius: 10px;
}
.grad1{
background-color: chartreuse;
/* to : 목적지 */
/* 오른쪽 아래 방향으로 초록에서 흰색으로 그라데이션 넣기 */
background: linear-gradient(to right bottom, chartreuse, white);
}
.grad2{
background-color: rgb(95, 182, 7);
/* 45도 (오른쪽 위) 방향으로, 초록에서 흰색으로 그래디언트만들어주세여 */
background: linear-gradient(45deg, rgb(95, 182, 7), white );
}
.grad3{
background-color: rgb(38, 71, 5);
/* 위에서 부터 아래방향으로 그래디언트 만드는데, 30%위치에는 하얀색으로 색상 중지점을 설정해주세여 */
background: linear-gradient(to bottom, rgb(38, 71, 5), white 30%, rgb(38, 71, 5));
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| 그라데이션 응용 (0) | 2022.12.29 |
|---|---|
| radial그라데이션 (0) | 2022.12.29 |
| CSS 연습 (0) | 2022.12.29 |
| background예제 2 (0) | 2022.12.28 |
| background와 vw,vh (1) | 2022.12.28 |