여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - Gradients
CSS – Gradients
2년전 작성
2년전 수정

그라이드언트를 이용하여 조금 더 화려한 홈페이지를 만들 수 있다.

주로 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>
기본 예시
0deg
90deg
180deg
-90deg
70deg

두 가지보다 많은 색

.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>
기본 예시
basic-colors
hard-line
colors-value

이미지 배경 색

.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-gradient
radial-ellipse-side
radial-ellipse-far
radial-circle-close

가운데 지정

.radial-center {
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, black 50%);
}
<div class="radial-center"></div>
기본 예시
왼쪽 30px 위치

그라이언트 누적

.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>
기본 예시
45deg
90deg
180deg
-90deg

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>
기본 예시
plaid-gradient

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>
기본 예시
기본
참고

Mingg`s Diary
밍구
공부 목적 블로그