Front-end/Client
CSS : Gradient 만들기 (linear-gradient)
sunnnkim
2020. 1. 10. 16:06
background: linear-gradient ( to bottom, #ddeeff, #aabbdd);
* to-top : 아래에서 위로 그러데이션 생성
to-left : 오른쪽에서 왼쪽으로 그라데이션 생성
to-right : 왼쪽에서 오른쪽으로 그라데이션 생성
to-bottom : 위에서 아래로 그라데이션 생성 (기본)
** 그라데이션 조합을 만들어주는 사이트
http://www.colinkeany.com/blend/
Blend—Create and customize beautiful CSS3 gradients.
Blend—Create and customize beautiful CSS3 gradients.
www.colinkeany.com
https://uigradients.com/#TalkingToMiceElf
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
uigradients.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
background-color: #CEE3F6;
border-color: 1px solid #666666;
background: linear-gradient(to bottom, #ddeeff, #aabbdd);
margin: 1em;
padding: 1em;
width: 500px;
height: 50px;
padding-left: 50px;
padding-top: 30px;
border-radius: 10px;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="box">
CSS로 그라데이션 만들기
</div>
</body>
</html>