그라이드언트를 이용하여 조금 더 화려한 홈페이지를 만들 수 있다.
주로 Gradient generator를 이용하긴하지만 대략적으로 알고있어야 수정할 때 수월하게 수정할 수 있다.
Gradients
그라디언트 함수에는 linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), 그리고 repeating-conic-gradient() 까지 이용할 수 있다.
<img>의 배경 색상으로도 그라디언트를 사용할 수 있다.
linear-gradient()
선형 그라디언트를 표현해보자.
기본
.basic-linear {
background: linear-gradient(blue, pink);
}
.toright {
background: linear-gradient(blue, pink);
}
.tobottomright {
background: linear-gradient(blue, pink);
}
<div class="basic-linear"></div> <div class="toright"></div> <div class="tobottomright"></div>
기본 예시
각도
.0deg{
background: linear-gradient(0deg, blue, pink);
}
.90deg{
background: linear-gradient(90deg, blue, pink);
}
.180deg{
background: linear-gradient(180deg, blue, pink);
}
.minus90deg{
background: linear-gradient(-90deg, blue, pink);
}
.70deg{
background: linear-gradient(70deg, blue, pink);
}
<div class="0deg"></div> <div class="90deg"></div> <div class="180deg"></div> <div class="minus90deg"></div> <div class="70deg"></div>
기본 예시
두 가지보다 많은 색
.basic-colors{
background: linear-gradient(red, orange, yellow, green, blue, navy, purple);
}
.hard-line {
background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}
.colors-value {
background: linear-gradient(background: linear-gradient(to left, pink 10px, blue 50%, red);
}
<div class="basic-colors"></div> <div class="colors-value"></div>
기본 예시
이미지 배경 색
.layered-image {
background: linear-gradient(to right, transparent, pink),
url("이미지 URL");
}
<div class="layered-image"></div>
기본 예시
그라디언트 누적
.stacked-linear {
background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
<div class="stacked-linear"></div>
기본 예시
radial-gradient()
방사형 그라디언트를 표현해보자.
기본
.basic-radial {
background: radial-gradient(pink, blue);
}
<div class="basic-radial"></div>
기본 예시
크기 지정
.radial-gradient {
background: background: radial-gradient(red 10px, yellow 30%, black 50%);
}
.radial-ellipse-side {
background: radial-gradient(ellipse closest-side, red, yellow 10%, black 50%, gray);
}
.radial-ellipse-far {
background: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow 10%, black 50%, gray);
}
.radial-circle-close {
background: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, black 50%, gray);
}
<div class="radial-gradient"></div> <div class="radial-ellipse-side"></div> <div class="radial-ellipse-far"></div> <div class="radial-circle-close"></div>
기본 예시
가운데 지정
.radial-center {
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, black 50%);
}
<div class="radial-center"></div>
기본 예시
그라이언트 누적
.stacked-radial {
background:
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5),
rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5),
rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5),
rgba(0,255,0,0) 70.71%) beige;
border-radius: 50%;
}
<div class="stacked-radial"></div>
기본 예시
conic-gradient()
원뿔형 그라디언트를 표현해보자.
기본
.basic-conic {
background: conic-gradient(pink, blue);
}
<div class="basic-conic"></div>
기본 예시
가운데 지정
.conic-center {
background: conic-gradient(at 0% 30%, red 10%, yellow 30%, blue 50%);
}
<div class="conic-center"></div>
기본 예시
각도 변경
.conic-45deg {
background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
}
.conic-90deg {
background: conic-gradient(from 90deg, red, orange, yellow, green, blue, purple);
}
.conic-180deg {
background: conic-gradient(from 180deg, red, orange, yellow, green, blue, purple);
}
.conic-minus90deg {
background: conic-gradient(from -90deg, red, orange, yellow, green, blue, purple);
}
<div class="conic-45deg"></div> <div class="conic-90deg"></div> <div class="conic-180deg"></div> <div class="conic-minus90deg"></div>
기본 예시
repeating-linear-gradient()
선형 그라디언트를 반복해서 표현해보자.
기본
.repeating-linear {
background: repeating-linear-gradient(-45deg, #FFCCCC, #FFCCCC 5px, #770000 5px, #770000 10px);
}
<div class="repeating-linear"></div>
기본 예시
그라디언트 누적
.multi-repeating-linear {
background:
repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px),
repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px),
repeating-linear-gradient(23deg, red 50px, orange 100px,
yellow 150px, green 200px, blue 250px,
indigo 300px, violet 350px, red 370px);
}
<div class="multi-repeating-linear"></div>
기본 예시
격자무늬 그라디언트
.plaid-gradient {
background:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
background:
repeating-linear-gradient(90deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px);
}
<div class="plaid-gradient"></div>
기본 예시
repeating-radial-gradient()
방사형 그라디언트를 반복해보자.
기본
.repeating-radial {
background: repeating-radial-gradient(#770000, #770000 5px, #FFCCCC 5px, #FFCCCC 10px);
}
<div class="repeating-radial"></div>
기본 예시
그라디언트 누적
.multi-target {
background:
repeating-radial-gradient(ellipse at 80% 50%,rgba(114,0,0,0.5),
rgba(114,0,0,0.5) 15px, rgba(245,185,185,0.5) 15px,
rgba(245,185,185,0.5) 30px) top left no-repeat,
repeating-radial-gradient(ellipse at 20% 50%,rgba(114,0,0,0.5),
rgba(114,0,0,0.5) 10px, rgba(245,185,185,0.5) 10px,
rgba(245,185,185,0.5) 20px) top left no-repeat yellow;
background-size: 200px 200px, 150px 150px;
}
<div class="multi-target"></div>
기본 예시
참고
MDN Web Docs - Using CSS gradients
Gradient CSS Generator
공부 목적 블로그