HTML, CSS, JS
CSS : 그레디언트 속성
himzei
2022. 8. 30. 13:27
linear-gradient() 함수
색상이 한 방향에서 다른 방향으로 변화하는 선형 그레디언트 적용
linear-gradient(각도, 색상 위치, 색상 위치)
linear-gradient(45deg, #f85032 0%, #e73827 100%)
<!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>
div {
width: 200px;
height: 60px;
text-align: center;
}
#box1 {
background: linear-gradient(90deg, #f85032 1%, #e73827 100%)
}
#box2 {
background: linear-gradient(90deg, #f85032 1%, #f16f5c 50%, #f6290c 50%, #db5253 100%)
}
</style>
</head>
<body>
<div id="box1">
<h1>Box 1</h1>
</div>
<div id="box2">
<h1>Box 2</h1>
</div>
</body>
</html>
radial-gradient() 함수
linear-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>
div {
width: 200px;
height: 60px;
text-align: center;
}
#box3 {
background: radial-gradient(#f85032 1%, #f16f5c 50%, #f6290c 50%, #db5253 100%)
}
</style>
</head>
<body>
<div id="box3">
<h1>Circle</h1>
</div>
</body>
</html>
에쁜 그레디언트 적용 참고사이트
Free Gradients Collection by itmeo.com
Free collection of 180 background gradients that you can use as content backdrops in any part of your website.
webgradients.com
사이트 메인페이지에서 마우스 클릭만 하면 CSS 소스가 복사가 된다
에디터에서 그대로 붙여넣기만 하면 된다.
