초보개발자의 성장블로그
CSS 38 gradient효과
프론트엔드/CSS2021. 4. 4. 19:18
background: linear-gradient(방향, 색);
선형 그레디언트
background:radical-gradient(모양, 색 )
원형 그레디언트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#grad1{
height: 70px;
background: red;
background: linear-gradient(270deg,red,yellow);
}
#grad2{
height: 70px;
background: red;
background: linear-gradient(red,yellow,green);
}
#grad3{
height: 70px;
background: red;
background: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
}
#grad4{
height: 70px;
background: red;
background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<h4>2색 선형 그레이디언트</h4>
<div id="grad1"></div>
<h4>3색 선형 그레이디언트</h4>
<div id="grad2"></div>
<h4>7색 선형 그레이디언트</h4>
<div id="grad3"></div>
<h4>2색 선형 그레이디언트(to right)</h4>
<div id="grad4"></div>
<p><strong>참고:</strong>최신 브라우저를 사용해 주시기 바랍니다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#grad1{
height: 70px;
background: red;
background: radial-gradient(yellow,green);
}
#grad2{
height: 70px;
background: red;
background: radial-gradient(red,yellow,green);
}
#grad3{
height: 70px;
background: red;
background: radial-gradient(red 5%,yellow 15%,green 60%)
}
#grad4{
height: 100px;
width: 150px;
background: red;
background: radial-gradient(circle,red,yellow,green);
}
</style>
</head>
<body>
<h4>기본 2색 원형 그레이디언트</h4>
<div id="grad1"></div>
<h4>3색 원형 그레이디언트</h4>
<div id="grad2"></div>
<h4>색상 영역 지정(% 단위)</h4>
<div id="grad3"></div>
<h4>원형 모양 지정(ellipse, circle)</h4>
<div id="grad4"></div>
<p><strong>참고: </strong>최신 브라우저를 사용해 주시기 바랍니다.</p>
</body>
</html>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 40 3차원 변환 함수 (0) | 2021.04.04 |
|---|---|
| CSS 39 2차원 변환 함수 (0) | 2021.04.04 |
| CSS 37 visibility 속성과 display 속성 (4) | 2021.04.04 |
| CSS 36 opacity로 불투명도 속성을 주기 (0) | 2021.04.04 |
| CSS 35 회원가입 폼 만들기 (2) | 2021.04.04 |
댓글()