안녕하세요! 프론트엔드 개발 강사입니다. CSS를 공부하면서 그라디언트(Gradient) 부분에 오셨군요! 그라디언트는 웹 디자인을 화려하고 입체적으로 만들어주는 아주 강력한 무기입니다. 공식 문서의 내용이 조금 딱딱할 수 있어서, 제가 현업에서 사용하는 팁들을 팍팍 섞어 아주 친절하고 이해하기 쉽게 구어체로 모두 번역해 드릴게요. 자, 시작해 볼까요?
CSS 그라디언트 사용하기 (Using CSS gradients)
CSS 그라디언트(CSS gradients)는 두 개 이상의 색상 사이에서 점진적인 전환(그라데이션)이 일어나는 특별한 형태의 <image>이며, <gradient> 데이터 타입으로 표현됩니다. 여러분은 세 가지 유형의 그라디언트 중 하나를 선택할 수 있어요.
1. 직선으로 진행되는 선형(linear) ( linear-gradient() 함수 사용 )
2. 중심에서 퍼져나가는 방사형(radial) ( radial-gradient() 함수 사용 )
3. 중심을 기준으로 회전하는 원뿔형(conic) ( conic-gradient() 함수 사용 )
여기에 더해, 반복되는 패턴을 만들고 싶다면 repeating-linear-gradient(), repeating-radial-gradient(), 그리고 repeating-conic-gradient() 함수를 사용할 수도 있습니다.
그라디언트는 배경(background)과 같이 <image>가 들어갈 수 있는 곳이라면 어디든 사용할 수 있습니다. 그라디언트는 브라우저가 동적으로 생성하기 때문에, 과거에 비슷한 효과를 내기 위해 사용했던 무거운 래스터 이미지(jpg, png 등) 파일들을 더 이상 쓸 필요가 없게 해 줍니다. 게다가 브라우저가 직접 그려내기 때문에 아무리 확대를 해도 래스터 이미지보다 훨씬 선명하고, 화면 크기에 맞춰 즉각적으로 크기가 조절된다는 엄청난 장점이 있죠!
👨🏫 강사의 팁:
과거에는 버튼 하나에 그라데이션을 넣으려고 포토샵으로 이미지를 잘라서 배경으로 넣곤 했어요. 하지만 이제는 CSS 한 줄이면 해상도 걱정 없이 완벽하게 구현되죠. 웹 성능을 높이는 데에도 CSS 그라디언트가 큰 역할을 한답니다!
이 글에서는 먼저 선형 그라디언트를 소개하고, 선형 그라디언트 예제를 통해 모든 그라디언트 유형에서 지원되는 공통 기능들을 살펴본 다음, 방사형, 원뿔형, 그리고 반복 그라디언트 순서로 넘어가 볼게요.
이 문서에서 다룰 내용
- 선형 그라디언트 사용하기 (Using linear gradients)
- 색상 선언 및 효과 만들기 (Declaring colors & creating effects)
- 방사형 그라디언트 사용하기 (Using radial gradients)
- 원뿔형 그라디언트 사용하기 (Using conic gradients)
- 반복 그라디언트 사용하기 (Using repeating gradients)
- 함께 보기 (See also)
선형 그라디언트 사용하기 (Using linear gradients)
선형 그라디언트(linear gradient)는 직선을 따라 색상이 부드럽게 변하는 색상 띠를 만듭니다.
기본 선형 그라디언트 (A basic linear gradient)
가장 기본적인 형태의 그라디언트를 만들려면 두 개의 색상만 지정하면 됩니다. 이 색상 지정 지점들을 컬러 스탑(color stops)이라고 부릅니다. 최소 두 개가 필요하지만, 원한다면 얼마든지 많이 추가할 수 있어요.
<div class="simple-linear"></div>div {
width: 120px;
height: 120px;
}.simple-linear {
background: linear-gradient(blue, pink);
}방향 바꾸기 (Changing the direction)
기본적으로 선형 그라디언트는 위에서 아래로(top to bottom) 진행됩니다. 하지만 여러분이 직접 방향을 지정해서 회전시킬 수도 있어요.
<div class="horizontal-gradient"></div>div {
width: 120px;
height: 120px;
}.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}대각선 그라디언트 (Diagonal gradients)
당연히 모서리에서 모서리로 이어지는 대각선 방향으로도 그라디언트를 만들 수 있습니다.
<div class="diagonal-gradient"></div>div {
width: 200px;
height: 100px;
}.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}각도 사용하기 (Using angles)
방향을 조금 더 세밀하게 제어하고 싶다면, 그라디언트에 구체적인 '각도(angle)'를 지정할 수 있습니다.
<div class="angled-gradient"></div>div {
width: 120px;
height: 120px;
}.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}각도를 사용할 때, 0deg는 아래에서 위로 향하는 수직 그라디언트이고, 90deg는 왼쪽에서 오른쪽으로 향하는 수평 그라디언트입니다. 이렇게 시계 방향으로 돌아가게 되죠. 음수(마이너스) 각도를 넣으면 시계 반대 방향으로 돌아갑니다.
👨🏫 강사의 팁:
시계의 12시 방향이0deg, 3시 방향이90deg, 6시 방향이180deg라고 생각하시면 외우기 쉬워요!
색상 선언 및 효과 만들기 (Declaring colors & creating effects)
모든 CSS 그라디언트 유형은 위치에 따라 색상의 범위가 결정됩니다. CSS 그라디언트가 만들어내는 색상들은 위치에 따라 연속적으로 변하면서 아주 부드러운 전환을 만들어냅니다. 하지만 반대로 단색 띠를 만들거나 두 색상 사이를 딱딱하게 끊어지게 전환할 수도 있죠. 아래 설명할 내용들은 모든 그라디언트 함수에 동일하게 적용됩니다.
두 개 이상의 색상 사용하기 (Using more than two colors)
꼭 두 가지 색상만 쓸 필요는 없습니다. 원하는 만큼 여러 개의 색상을 팍팍 넣으셔도 돼요! 위치를 따로 정해주지 않으면, 색상들은 그라디언트를 따라 균등한 간격으로 알아서 배치됩니다.
<div class="auto-spaced-linear-gradient"></div>div {
width: 120px;
height: 120px;
}.auto-spaced-linear-gradient {
background: linear-gradient(red, yellow, blue, orange);
}컬러 스탑 위치 지정하기 (Positioning color stops)
컬러 스탑을 브라우저가 정해주는 기본 위치에 그냥 둘 필요는 없습니다. 위치를 세밀하게 조정하려면 각 컬러 스탑에 하나 또는 두 개의 퍼센트(%) 값이나 (선형, 방사형 그라디언트의 경우) 절대 길이(px 등) 값을 줄 수 있어요.
위치를 퍼센트로 지정할 때 0%는 시작점을, 100%는 끝점을 의미합니다. 하지만 특수한 효과를 내고 싶다면 이 범위를 벗어난 값(예: -10%, 120%)을 써도 괜찮습니다. 만약 위치를 생략하면, 첫 번째 색상은 0%, 마지막 색상은 100%에 배치되며, 중간에 있는 색상들은 앞뒤 색상들의 딱 중간 지점에 자동으로 계산되어 배치됩니다.
<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>div {
width: 120px;
height: 120px;
float: left;
margin-right: 10px;
box-sizing: border-box;
}.multiposition-stops {
background: linear-gradient(
to left,
lime 20%,
red 30%,
red 45%,
cyan 55%,
cyan 70%,
yellow 80%
);
background: linear-gradient(
to left,
lime 20%,
red 30% 45%,
cyan 55% 70%,
yellow 80%
);
}
.multiposition-stop2 {
background: linear-gradient(
to left,
lime 25%,
red 25%,
red 50%,
cyan 50%,
cyan 75%,
yellow 75%
);
background: linear-gradient(
to left,
lime 25%,
red 25% 50%,
cyan 50% 75%,
yellow 75%
);
}위의 첫 번째 예제를 보면, 라임색(lime)은 생략된 0% 지점부터 시작해서 지정한 20% 지점까지 이어지고, 그다음 10% 구간 동안 빨간색(red)으로 서서히 전환됩니다. 30% 지점에서 완전한 빨간색이 되고 그게 45% 지점까지 유지되다가, 다시 청록색(cyan)으로 서서히 변해서 55%부터 70% 구간에서는 완전한 청록색으로 나타나는 식입니다.
두 번째 예제에서는 각 색상의 두 번째 컬러 스탑 위치가 다음 색상의 첫 번째 컬러 스탑 위치와 완벽하게 똑같습니다. 이렇게 하면 경계가 섞이지 않고 딱 나뉘는 줄무늬(stripe) 효과가 만들어져요!
두 예제 모두 그라디언트를 두 번 작성했는데, 첫 번째 방식은 각 스탑마다 색상을 반복해서 적는 CSS Images Level 3의 과거 방식이고, 두 번째 방식은 하나의 색상 선언에 두 개의 위치 길이를 한 번에 적는 최신 CSS Images Level 4 방식입니다.
단단한 경계선(줄무늬) 만들기 (Creating hard lines)
점진적인 전환(그라데이션) 대신 두 색상 사이에 날카롭게 끊어지는 선(줄무늬)을 만들려면, 인접한 두 컬러 스탑을 같은 위치에 두면 됩니다. 이 예제에서는 그라디언트의 절반 지점인 50% 마크에 두 색상이 같은 컬러 스탑 위치를 공유하도록 했습니다.
👨🏫 강사의 팁:
이 방법은 이미지 없이 사선 무늬(stripe) 패턴이나 프로그레스 바(progress bar)를 CSS로만 그릴 때 정말 자주 쓰이는 꿀팁입니다! 꼭 기억해 두세요.
<div class="striped"></div>div {
width: 120px;
height: 120px;
}.striped {
background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}그라디언트 힌트 (Gradient hints)
기본적으로 그라디언트는 인접한 두 컬러 스탑 사이에서 딱 균등하게 전환되며, 두 컬러 스탑의 50% 지점에서 두 색상이 1:1로 섞인 색깔이 나옵니다. 하지만 이 전환의 중간점(midpoint) 위치를 특정 지점으로 끌어당기기 위해 '컬러 힌트(color hint)'를 넣을 수 있어요. 아래 예제에서는 두 색상 사이의 중간 전환점을 기본 50% 위치에서 10% 위치로 끌어당겼습니다. (두 번째 .regular-progression은 힌트를 주지 않았을 때와의 차이를 비교하기 위해 넣은 거예요.)
<div class="color-hint-gradient"></div>
<div class="regular-progression"></div>div {
width: 120px;
height: 120px;
float: left;
margin-right: 10px;
box-sizing: border-box;
}.color-hint-gradient {
background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
background: linear-gradient(to top, lime, cyan);
}그라디언트 겹치기 (Overlaying gradients)
그라디언트는 투명도(transparency)를 지원하기 때문에 여러 개의 배경을 쌓아 올려 아주 멋진 효과를 낼 수도 있습니다. 배경은 위에서 아래로 층층이 쌓이는데, CSS에서 가장 먼저 선언된 배경이 가장 위쪽 층에 놓이게 됩니다.
<div class="layered-image"></div>div {
width: 300px;
height: 150px;
}.layered-image {
background:
linear-gradient(to right, transparent, mistyrose), url("critters.png");
}그라디언트 쌓기 (Stacked gradients)
다른 이미지뿐만 아니라 그라디언트 위에 또 다른 그라디언트를 겹쳐 쌓을 수도 있습니다. 가장 위쪽에 있는 그라디언트가 완전히 불투명하지 않은 이상, 그 아래에 깔린 그라디언트들이 투과되어 보인답니다.
<div class="stacked-linear"></div>div {
width: 200px;
height: 200px;
}.stacked-linear {
background:
linear-gradient(217deg, rgb(255 0 0 / 80%), transparent 70.71%),
linear-gradient(127deg, rgb(0 255 0 / 80%), transparent 70.71%),
linear-gradient(336deg, rgb(0 0 255 / 80%), transparent 70.71%);
}그라디언트 혼합하기 (Blending gradients)
투명도를 조절해서 겹치거나, 래스터 배경 이미지 위에 겹치는 것 외에도, 다른 CSS 효과들을 그라디언트와 함께 사용할 수 있습니다. 아래 예제에서는 네 개의 <div> 요소가 배경 이미지로 투명도가 없는 똑같은 두 개의 그라디언트를 가집니다. 뒤의 세 개 요소에는 background-blend-mode 속성에 각기 다른 값을 주어 두 배경 이미지가 섞이면서 완전히 다른 효과를 만들어내는 것을 볼 수 있습니다.
👨🏫 강사의 팁:
포토샵의 블렌딩 모드(스크린, 오버레이, 차이 등)를 CSS로 그대로 가져온 기능이에요. 디자인 시안에 독특한 색상 필터가 들어갔을 때 아주 요긴하게 쓸 수 있습니다!
<div class="original"></div>
<div class="screen"></div>
<div class="overlay"></div>
<div class="difference"></div>div {
width: 120px;
height: 120px;
float: left;
margin-right: 10px;
box-sizing: border-box;
}div {
background:
linear-gradient(to top, red, blue),
linear-gradient(to right, #5500ff, #00ff55);
}
.screen {
background-blend-mode: screen;
}
.overlay {
background-blend-mode: overlay;
}
.difference {
background-blend-mode: difference;
}방사형 그라디언트 사용하기 (Using radial gradients)
방사형 그라디언트(Radial gradients)는 중앙의 한 점에서 바깥쪽으로 퍼져나간다는 점만 빼면 선형 그라디언트와 매우 비슷합니다. 중심점이 어디인지 여러분이 직접 지정할 수도 있고, 모양을 완전한 원형(circle)으로 할지 타원형(ellipse)으로 할지도 정할 수 있습니다.
기본 방사형 그라디언트 (A basic radial gradient)
선형 그라디언트와 마찬가지로 두 가지 색상만 있으면 방사형 그라디언트를 만들 수 있습니다. 기본적으로 그라디언트의 중심은 요소의 정중앙(50% 50%)이며, 요소 박스의 종횡비(aspect ratio)에 맞춰 타원형으로 퍼져나갑니다.
<div class="simple-radial"></div>div {
width: 240px;
height: 120px;
}.simple-radial {
background: radial-gradient(red, blue);
}방사형 컬러 스탑 위치 지정하기 (Positioning radial color stops)
선형과 마찬가지로, 퍼센트(%)나 절대 길이(px 등)를 통해 각각의 방사형 컬러 스탑 위치를 세밀하게 조정할 수 있습니다.
<div class="radial-gradient"></div>div {
width: 120px;
height: 120px;
}.radial-gradient {
background: radial-gradient(red 10px, yellow 30%, dodgerblue 50%);
}그라디언트 중심점 위치 지정하기 (Positioning the center of the gradient)
at 이라는 키워드를 사용하여 중심점 위치를 키워드(top, left 등), 퍼센트, 또는 절대 길이로 지정할 수 있습니다. 값이 하나만 주어지면 그 값이 가로/세로 양쪽에 적용되고, 두 개의 값이 오면 첫 번째는 왼쪽에서의 위치(X축), 두 번째는 위쪽에서의 위치(Y축)를 의미합니다.
<div class="radial-gradient"></div>div {
width: 120px;
height: 240px;
}.radial-gradient {
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, dodgerblue 50%);
}방사형 그라디언트 크기 조절하기 (Sizing radial gradients)
선형 그라디언트와 달리, 방사형 그라디언트는 끝나는 크기를 지정할 수 있습니다. 가능한 크기 값으로는 closest-corner(가장 가까운 모서리), closest-side(가장 가까운 면), farthest-corner(가장 먼 모서리 - 기본값), farthest-side(가장 먼 면)가 있습니다. 완전한 원(circle)의 경우에는 길이 값으로 크기를 정할 수 있고, 타원(ellipse)의 경우에는 길이 값이나 퍼센트 값 모두 사용 가능합니다.
예제: 타원에서 closest-side 사용하기
이 예제에서는 closest-side 값을 사용했습니다. 이는 중심점에서 요소의 박스의 가장 가까운 면(side)까지의 거리가 그라디언트의 크기가 된다는 것을 의미합니다.
<div class="radial-ellipse-side"></div>div {
width: 240px;
height: 100px;
}.radial-ellipse-side {
background: radial-gradient(
ellipse closest-side,
red,
yellow 10%,
dodgerblue 50%,
beige
);
}예제: 타원에서 farthest-corner 사용하기
이 예제는 위와 비슷하지만, 크기 값으로 farthest-corner를 사용했습니다. 이것은 중심점에서 박스의 가장 먼 모서리(corner)까지의 거리를 그라디언트의 크기로 설정합니다.
<div class="radial-ellipse-far"></div>div {
width: 240px;
height: 100px;
}.radial-ellipse-far {
background: radial-gradient(
ellipse farthest-corner at 90% 90%,
red,
yellow 10%,
dodgerblue 50%,
beige
);
}예제: 원에서 closest-side 사용하기
이 예제는 closest-side를 사용하는데, 원(circle)의 반지름이 중심점과 가장 가까운 면 사이의 거리가 됩니다. 이 예제의 경우, 그라디언트 중심점이 왼쪽에서 25%, 아래에서 25%에 위치해 있고 요소의 높이가 너비보다 더 짧기 때문에, 중심과 바닥 가장자리(bottom edge) 사이의 거리가 반지름이 됩니다.
<div class="radial-circle-close"></div>div {
width: 240px;
height: 120px;
}.radial-circle-close {
background: radial-gradient(
circle closest-side at 25% 75%,
red,
yellow 10%,
dodgerblue 50%,
beige
);
}예제: 타원에서 길이 또는 퍼센트 사용하기
타원(ellipse)의 경우에 한해서, 길이(px)나 퍼센트를 사용하여 크기를 직접 지정할 수 있습니다. 첫 번째 값은 가로 반지름, 두 번째 값은 세로 반지름을 의미하며, 퍼센트를 사용하면 해당 축 기준의 박스 크기에 비례합니다. 아래 예제에서는 가로 반지름에 퍼센트를 사용했습니다.
<div class="radial-ellipse-size"></div>div {
width: 240px;
height: 120px;
}.radial-ellipse-size {
background: radial-gradient(
ellipse 50% 50px,
red,
yellow 10%,
dodgerblue 50%,
beige
);
}예제: 원에서 길이 사용하기
원(circle)의 경우 크기(반지름)를 나타내는 <length> 값을 하나 지정할 수 있습니다.
<div class="radial-circle-size"></div>div {
width: 240px;
height: 120px;
}.radial-circle-size {
background: radial-gradient(
circle 50px,
red,
yellow 10%,
dodgerblue 50%,
beige
);
}방사형 그라디언트 쌓기 (Stacked radial gradients)
선형 그라디언트와 마찬가지로, 방사형 그라디언트도 여러 개를 겹쳐서 쌓을 수 있습니다. 먼저 적은 것이 가장 위에, 나중에 적은 것이 가장 아래에 놓입니다.
<div class="stacked-radial"></div>div {
width: 200px;
height: 200px;
}.stacked-radial {
background:
radial-gradient(circle at 50% 0, rgb(255 0 0 / 50%), transparent 70.71%),
radial-gradient(circle at 6.7% 75%, rgb(0 0 255 / 50%), transparent 70.71%),
radial-gradient(circle at 93.3% 75%, rgb(0 255 0 / 50%), transparent 70.71%)
beige;
border-radius: 50%;
}원뿔형 그라디언트 사용하기 (Using conic gradients)
conic-gradient() CSS 함수는 색상 전환이 중심점 밖으로 퍼져나가는 게 아니라, 중심점을 기준으로 둥글게 회전하며 생성되는 그라디언트 이미지를 만듭니다. 대표적으로 파이 차트(pie chart)나 색상환(color wheel)을 만들 때 유용하지만, 체커보드나 재미있는 패턴 효과를 만들 때도 쓰일 수 있어요.
원뿔형 그라디언트의 문법은 방사형과 비슷하지만, 컬러 스탑이 중심에서 뻗어 나가는 직선 위가 아니라 원의 둘레를 따라 둥글게(호 모양으로) 배치된다는 점이 다릅니다. 따라서 컬러 스탑 값으로 절대 길이는 쓸 수 없고, 오직 퍼센트(%)나 각도(deg)만 유효합니다.
방사형 그라디언트는 색상이 타원 중심에서 모든 방향의 바깥쪽으로 퍼지죠. 하지만 원뿔형은 원의 위쪽(12시 방향)에서 시작해 시계방향으로 빙글 돌면서 색상이 바뀝니다. 방사형처럼 중심 위치를 자유롭게 바꿀 수 있고, 선형처럼 그라디언트의 시작 각도도 바꿀 수 있습니다.
기본 원뿔형 그라디언트 (A basic conic gradient)
다른 그라디언트들과 마찬가지로 원뿔형 그라디언트도 최소 두 개의 색상만 있으면 만들어집니다. 기본적으로 중심은 50% 50% 지점에 있으며, 12시 방향(up)을 바라보며 시작합니다.
<div class="simple-conic"></div>div {
width: 120px;
height: 120px;
}.simple-conic {
background: conic-gradient(red, blue);
}원뿔형 중심 위치 지정하기 (Positioning the conic center)
방사형과 동일하게 at 이라는 키워드를 사용하여, 중심점의 위치를 키워드, 퍼센트, 혹은 절대 길이로 마음대로 지정할 수 있어요.
<div class="conic-gradient"></div>div {
width: 120px;
height: 120px;
}.conic-gradient {
background: conic-gradient(at 0% 30%, red 10%, yellow 30%, dodgerblue 50%);
}각도 변경하기 (Changing the angle)
기본적으로 색상들은 원을 따라 동일한 간격으로 벌어져 있습니다. 만약 시작 지점의 각도를 바꾸고 싶다면 맨 앞에 from <각도>를 적어주면 됩니다. 그리고 컬러 스탑 색상 뒤에 각도나 퍼센트를 적어서 각 색상이 끝나는 위치를 세세하게 조절할 수도 있습니다.
<div class="conic-gradient"></div>div {
width: 120px;
height: 120px;
}.conic-gradient {
background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}반복 그라디언트 사용하기 (Using repeating gradients)
기본 linear-gradient(), radial-gradient(), conic-gradient() 함수는 컬러 스탑이 영역 끝까지 도달하면 한 번만 실행되고 끝납니다. 하지만 이 패턴을 무한 반복시키고 싶을 때 쓸 수 있는 함수들이 따로 준비되어 있습니다. 바로 repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient() 입니다.
반복되는 구간(패턴)의 크기는 첫 번째 컬러 스탑의 위치와 마지막 컬러 스탑의 위치 사이의 간격으로 결정됩니다.
- 첫 번째 색상에 위치 값이 없으면 기본적으로 0에서 시작합니다.
- 마지막 색상에 위치 값이 없으면 100%에서 끝납니다.
- 둘 다 위치를 적지 않으면 전체 크기(100%)가 반복 단위가 되므로, 선형/원뿔형은 전혀 반복되지 않는 것처럼 보이고, 방사형도 거의 반복 효과를 느낄 수 없습니다.
따라서 첫 번째와 마지막 컬러 스탑의 간격을 100%(혹은 360도)보다 작게 만들어야 패턴이 여러 번 반복되게 됩니다!
반복 선형 그라디언트 (Repeating linear gradients)
아래 예제는 repeating-linear-gradient()를 사용해서 직선을 따라 계속 반복되는 그라디언트를 만들었습니다. 그라디언트가 반복될 때마다 색상 주기가 처음부터 다시 시작되죠. 이 예제의 경우, 한 번 반복되는 패턴의 폭이 10px로 고정되어 있습니다.
<div class="repeating-linear"></div>div {
width: 120px;
height: 120px;
}.repeating-linear {
background: repeating-linear-gradient(
-45deg,
red,
red 5px,
blue 5px,
blue 10px
);
}여러 개의 반복 선형 그라디언트 겹치기 (Multiple repeating linear gradients)
일반 그라디언트와 마찬가지로, 반복 그라디언트도 여러 개 겹쳐서 사용할 수 있습니다. 대신 이럴 때는 투명도(transparent)를 사용해서 밑에 깔린 무늬가 보이게 하거나, 배경 이미지마다 다른 background-size나 background-position을 주어야 효과를 제대로 볼 수 있습니다. (아래 예제에서는 투명도를 사용했어요.)
여기서는 반복 선의 크기가 각각 300px, 230px, 300px로 세팅되어 복잡하게 얽히는 모습을 볼 수 있습니다.
<div class="multi-repeating-linear"></div>div {
width: 600px;
height: 400px;
}.multi-repeating-linear {
background:
repeating-linear-gradient(
190deg,
rgb(255 0 0 / 50%) 40px,
rgb(255 153 0 / 50%) 80px,
rgb(255 255 0 / 50%) 120px,
rgb(0 255 0 / 50%) 160px,
rgb(0 0 255 / 50%) 200px,
rgb(75 0 130 / 50%) 240px,
rgb(238 130 238 / 50%) 280px,
rgb(255 0 0 / 50%) 300px
),
repeating-linear-gradient(
-190deg,
rgb(255 0 0 / 50%) 30px,
rgb(255 153 0 / 50%) 60px,
rgb(255 255 0 / 50%) 90px,
rgb(0 255 0 / 50%) 120px,
rgb(0 0 255 / 50%) 150px,
rgb(75 0 130 / 50%) 180px,
rgb(238 130 238 / 50%) 210px,
rgb(255 0 0 / 50%) 230px
),
repeating-linear-gradient(
23deg,
red 50px,
orange 100px,
yellow 150px,
green 200px,
blue 250px,
indigo 300px,
violet 350px,
red 370px
);
}체크무늬 그라디언트 (Plaid gradient)
투명도를 적용한 여러 개의 그라디언트를 겹치면 아주 멋진 타탄체크(Plaid) 무늬를 만들 수도 있습니다. 코드를 보시면 첫 번째 속성에서는 모든 컬러 스탑을 각각 따로 작성하는 고전적인 방식을 썼고, 아래 주석 처리된 부분(혹은 동일 효과의 다른 코드)은 한 번에 여러 위치를 선언하는 단축 방식을 썼습니다.
👨🏫 강사의 팁:
이 정도면 이제 그라디언트로 못 그리는 게 없겠죠? 이미지를 로드할 필요가 없어서 웹 사이트 속도를 늦추지 않는다는 게 이런 패턴 기법의 가장 큰 묘미입니다!
<div class="plaid-gradient"></div>div {
width: 200px;
height: 200px;
}.plaid-gradient {
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 50px,
rgb(255 127 0 / 25%) 50px,
rgb(255 127 0 / 25%) 56px,
transparent 56px,
transparent 63px,
rgb(255 127 0 / 25%) 63px,
rgb(255 127 0 / 25%) 69px,
transparent 69px,
transparent 116px,
rgb(255 206 0 / 25%) 116px,
rgb(255 206 0 / 25%) 166px
),
repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
rgb(255 127 0 / 25%) 50px,
rgb(255 127 0 / 25%) 56px,
transparent 56px,
transparent 63px,
rgb(255 127 0 / 25%) 63px,
rgb(255 127 0 / 25%) 69px,
transparent 69px,
transparent 116px,
rgb(255 206 0 / 25%) 116px,
rgb(255 206 0 / 25%) 166px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgb(143 77 63 / 25%) 5px,
rgb(143 77 63 / 25%) 10px
),
repeating-linear-gradient(
45deg,
transparent,
transparent 5px,
rgb(143 77 63 / 25%) 5px,
rgb(143 77 63 / 25%) 10px
);
background:
repeating-linear-gradient(
90deg,
transparent 0 50px,
rgb(255 127 0 / 25%) 50px 56px,
transparent 56px 63px,
rgb(255 127 0 / 25%) 63px 69px,
transparent 69px 116px,
rgb(255 206 0 / 25%) 116px 166px
),
repeating-linear-gradient(
0deg,
transparent 0 50px,
rgb(255 127 0 / 25%) 50px 56px,
transparent 56px 63px,
rgb(255 127 0 / 25%) 63px 69px,
transparent 69px 116px,
rgb(255 206 0 / 25%) 116px 166px
),
repeating-linear-gradient(
-45deg,
transparent 0 5px,
rgb(143 77 63 / 25%) 5px 10px
),
repeating-linear-gradient(
45deg,
transparent 0 5px,
rgb(143 77 63 / 25%) 5px 10px
);
}반복 방사형 그라디언트 (Repeating radial gradients)
이번엔 repeating-radial-gradient()를 사용해서 중심에서 밖으로 끝없이 퍼져나가는 물결(또는 과녁판) 무늬를 만들어보겠습니다. 10px 단위로 흑백이 반복되는 형태예요.
<div class="repeating-radial"></div>div {
width: 120px;
height: 120px;
}.repeating-radial {
background: repeating-radial-gradient(
black,
black 5px,
white 5px,
white 10px
);
}여러 개의 반복 방사형 그라디언트 겹치기 (Multiple repeating radial gradients)
<div class="multi-target"></div>div {
width: 250px;
height: 150px;
}.multi-target {
background:
repeating-radial-gradient(
ellipse at 80% 50%,
rgb(0 0 0 / 50%),
rgb(0 0 0 / 50%) 15px,
rgb(255 255 255 / 50%) 15px,
rgb(255 255 255 / 50%) 30px
)
top left no-repeat,
repeating-radial-gradient(
ellipse at 20% 50%,
rgb(0 0 0 / 50%),
rgb(0 0 0 / 50%) 10px,
rgb(255 255 255 / 50%) 10px,
rgb(255 255 255 / 50%) 20px
)
top left no-repeat yellow;
background-size:
200px 200px,
150px 150px;
}반복 원뿔형 그라디언트 (Repeating conic gradients)
이 예제에서는 repeating-conic-gradient()를 사용하여 중심을 기준으로 회전하는 패턴을 만듭니다. 여기서 정의한 3가지 색상(25% 간격)이 원 한 바퀴를 돌 때까지 총 4번 반복되는 형태가 완성됩니다!
<div class="repeating-conic"></div>div {
width: 120px;
height: 120px;
}.repeating-conic {
background: repeating-conic-gradient(
#66ccff 0% 8.25%,
#6633ff 8.25% 16.5%,
#ff3399 16.5% 25%
);
}여러 개의 반복 원뿔형 그라디언트 겹치기 (Multiple repeating conic gradients)
선형이나 방사형처럼, 원뿔형 그라디언트도 여러 개를 쌓아 올려 기하학적이고 복잡한 무늬를 만들어낼 수 있습니다. at <position> 값을 서로 다르게 줘서 중심점이 겹치지 않게 하거나, from <angle> 값을 다르게 줘서 패턴의 시작 위치가 어긋나게 설정하는 것이 비결입니다.
아래 예제는 투명도가 있는 세 개의 반복 원뿔형 그라디언트를 겹치고, 각 패턴이 4번씩 반복되게 만들었습니다. 밑에 깔린 패턴이 보이려면 반드시 투명한 색상을 쓰거나, 앞에서 배운 background-blend-mode 속성을 곁들여야 한다는 점 잊지 마세요!
<div class="multi-repeating-conic"></div>div {
width: 250px;
height: 250px;
}.multi-repeating-conic {
background:
repeating-conic-gradient(
from 0deg at 80% 50%,
#5691f580 0% 8.25%,
#b338ff80 8.25% 16.5%,
#f8305880 16.5% 25%
),
repeating-conic-gradient(
from 15deg at 50% 50%,
#e856f580 0% 8.25%,
#ff384c80 8.25% 16.5%,
#e7f83080 16.5% 25%
),
repeating-conic-gradient(
from 0deg at 20% 50%,
#f58356ff 0% 8.25%,
#caff38ff 8.25% 16.5%,
#30f88aff 16.5% 25%
);
}함께 보기 (See also)
더 깊이 있게 공부하고 싶다면 아래 링크들을 참고해 보세요!
- 그라디언트 함수들:
linear-gradient(),radial-gradient(),conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient(),repeating-conic-gradient() - 그라디언트 관련 CSS 데이터 타입:
<gradient>,<image> - 그라디언트 관련 CSS 속성:
background,background-image - CSS Gradients Patterns Gallery, by Lea Verou (CSS 그라디언트 패턴 갤러리)
- Gradient CSS Generator (CSS 그라디언트 생성기)
- Advanced CSS Gradient Generator (고급 CSS 그라디언트 생성기)
- HDR gradient generator (HDR 그라디언트 생성기)
자, 여기까지 CSS 그라디언트의 모든 것을 훑어봤습니다! 처음에는 각도나 위치 퍼센트가 좀 헷갈릴 수 있지만, 코드 에디터에서 숫자들을 직접 바꿔가며 눈으로 변화를 확인해 보시면 금방 감이 잡히실 거예요. 여러분만의 멋진 웹사이트 배경을 직접 그려보시길 응원합니다! 궁금한 점이 있으면 언제든 물어보세요! 화이팅! 🚀
