CSS 그라데이션 생성기

끌어서 다듬고, 쓰는 곳에 맞는 CSS로 가져가는 그라데이션 편집기

CSS 그라데이션 생성기는 그라데이션을 직접 손보는 편집기입니다. 무대 위 안내선을 끌어 선형 그라데이션의 각도를 돌리고, 원형·원뿔 그라데이션의 중심을 옮깁니다. 아래 자에서는 정지 색 손잡이를 끌어 위치를 바꾸고, 막대를 누른 자리에 새 정지 색을 더합니다. 고른 정지 색은 HEX 값·위치·불투명도를 칸에 직접 적어 맞출 수 있습니다.

만든 그라데이션은 배경·글자·테두리·버튼 네 곳에 동시에 입혀 보여 줍니다. 같은 그라데이션이라도 글자에 쓰려면 background-clip: text가, 둥근 테두리에 쓰려면 배경 두 겹이 필요하므로, 고른 쓰임에 맞춘 CSS를 따로 만듭니다. 흰 글자와 검은 글자를 얹었을 때 가장 낮은 대비, 섞는 방식(sRGB·OKLab·OKLCH), 천천히 흐르는 움직임과 CSS 변수도 함께 다룹니다.

언제 쓰나

• 이미지 파일 없이 배경을 만들 때: CSS 그라데이션은 브라우저가 화면을 그리면서 만드는 그림이라 따로 받을 파일이 없고, 칠할 상자의 크기에 맞춰 그려집니다. 첫 화면 배너나 카드 배경을 이미지 대신 코드 몇 줄로 둘 수 있습니다.
• 제목 글자에 색 흐름을 넣을 때: 글자 모양대로 그라데이션을 잘라 보이게 하는 코드는 배경 코드와 다릅니다. 글자 쓰임을 고르면 그 코드를 순서까지 맞춰 줍니다.
• 둥근 카드나 버튼에 그라데이션 테두리를 두를 때: border-image는 둥근 모서리를 따르지 않으므로, 테두리 쓰임은 모서리를 지키는 배경 두 겹 방식으로 코드를 만듭니다.
• 사진 위 글자를 읽히게 할 때: 투명에서 검정 75%로 짙어지는 덮개를 사진 위에 겹치면, 아래쪽에 놓인 흰 글자가 사진 색에 덜 묻힙니다. 예시의 '사진 덮개'가 이 경우입니다.
• 원 그래프나 줄무늬를 CSS만으로 그릴 때: 원뿔 그라데이션에 같은 위치의 정지 색을 두면 원 그래프가 되고, 반복 그라데이션은 사선 줄무늬를 만듭니다.

쓰는 법

1. 시작점 고르기: 예시 8개 가운데 원하는 모양과 가까운 것을 누릅니다. 처음부터 만들고 싶다면 모양(선형·원형·원뿔)부터 고릅니다.
2. 방향과 중심 맞추기: 선형은 무대 가운데 원 위의 손잡이를 끌거나 방향 버튼 8개를 누르고, 정확한 값은 각도 칸에 적습니다. 원형과 원뿔은 무대의 가운데 손잡이를 끌어 중심을 옮기고, 원뿔은 바깥 손잡이로 시작 각도를 돌립니다.
3. 정지 색 다듬기: 자의 막대를 누르면 그 자리의 색으로 정지 색이 생기고, 손잡이를 끌면 위치가 바뀝니다. 손잡이에 초점을 두고 ←·→ 키로 1%씩, Shift를 함께 누르면 10%씩 옮기며, Delete 키로 지웁니다. 색·위치·불투명도 칸은 고른 정지 색 하나를 바꿉니다.
4. 쓰는 곳 확인하기: 배경·글자·테두리·버튼 카드 가운데 쓸 곳을 누르면 오른쪽 CSS가 그 쓰임의 코드로 바뀝니다. 카드 아래에는 흰 글자와 검은 글자의 가장 낮은 대비가 나옵니다.
5. 복사하기: 클래스 이름을 정하고 필요하면 움직임과 CSS 변수를 켠 뒤 CSS 복사를 누릅니다. 링크 복사는 지금 그라데이션과 설정을 주소에 담아, 나중에 같은 화면을 다시 열 수 있게 합니다.

선형 그라데이션: 각도와 그라데이션 선

CSS Images 명세에서 각도 0deg는 위쪽을 가리키고, 각도가 커질수록 시계 방향으로 돕니다. 그래서 90deg는 오른쪽, 180deg는 아래쪽이며, 각도를 적지 않으면 아래쪽(to bottom)으로 흐릅니다. 색은 상자 가운데를 지나는 그라데이션 선을 따라 놓이고, 이 선의 길이는 상자의 너비 W와 높이 H로 abs(W·sinA) + abs(H·cosA)입니다. 이 길이는 0%와 100% 지점에서 선에 수직으로 그은 선이 상자의 모서리를 지나도록 정해집니다. 그래서 대각선 방향에서는 0%와 100% 지점이 상자 바깥에 놓이고, 모서리 두 곳에 첫 색과 끝 색이 정확히 닿습니다. 무대에서 대각선의 양 끝 정지 색 점이 보이지 않는 이유가 이것이며, 그런 정지 색은 아래 자에서 움직이면 됩니다.

to top right처럼 모서리를 가리키는 낱말은 45deg와 같지 않습니다. 명세는 이 낱말을 쓰면 50% 지점의 색이 나머지 두 모서리(왼쪽 위·오른쪽 아래)를 잇도록 각도를 계산하게 합니다. 그래서 각도는 상자 비율에 따라 바뀌고, 1920×1080 상자에서는 약 29.4deg가 됩니다. 정사각형 상자에서만 45deg와 같습니다. 이 도구는 상자 크기와 상관없이 같은 방향이 되도록 늘 각도(deg)로 적습니다.

원형과 원뿔: 중심과 크기

원형 그라데이션은 radial-gradient(끝 모양 크기 at 가로 세로, 정지 색들) 꼴입니다. 끝 모양은 원(circle)이나 타원(ellipse)이고, 크기 낱말은 100% 정지 색이 놓이는 끝 모양이 상자의 어디에 닿을지를 정합니다. 크기를 적지 않으면 가장 먼 모서리까지(farthest-corner)입니다. 아래 표는 1920×1080 상자에서 중심을 가로 30%·세로 25%(576px, 270px)에 둔 경우의 반지름입니다.

타원에 모서리 낱말을 쓰면 명세는 같은 쪽 변 낱말일 때의 가로세로 비율을 지킨 채 그 모서리를 지나게 합니다. 가장 가까운 모서리는 가장 가까운 두 변이 만나는 점이므로, 타원의 모서리 크기는 언제나 변 크기의 √2배(약 1.414배)가 됩니다. 중심을 상자 가장자리에 두고 closest-side를 고르면 반지름이 0이 되어, 브라우저는 마지막 정지 색에 가까운 색으로 상자를 거의 다 칠합니다.

원뿔 그라데이션은 conic-gradient(from 시작 각도 at 가로 세로, 정지 색들) 꼴이며, 시작 각도 0deg가 위쪽이고 시계 방향으로 돕니다. 정지 색 위치 0%~100%는 한 바퀴를 뜻하므로, 마지막 색이 첫 색과 다르면 시작 각도 자리에 날카로운 경계가 생깁니다. 색상환 예시처럼 첫 색을 끝에 다시 두면 이음매가 사라집니다. 반대로 원 그래프 예시는 경계를 일부러 만듭니다.

정지 색 위치 규칙

반복 그라데이션은 끝 정지 색과 첫 정지 색이 다르면 되풀이되는 경계마다 날카로운 선이 생깁니다. 첫 위치가 0%이고 끝 위치가 100%이면 되풀이할 자리가 없어 반복하지 않는 그라데이션과 똑같이 보이므로, 반복을 켤 때는 끝 정지 색을 앞쪽(예: 10%)으로 당겨야 합니다. 첫 위치와 끝 위치가 같으면 명세에 따라 정지 색들의 평균 색 하나로 칠해집니다.

투명한 정지 색과 사진 덮개

불투명도를 100% 아래로 내리면 이 도구는 색을 8자리 HEX로 적습니다. 끝 두 자리가 불투명도이며, 0~100%를 0~255로 바꾼 값입니다.

CSS Color 4는 투명한 색을 섞기 전에 색 값에 불투명도를 곱하는(premultiplied) 방식을 정합니다. 그래서 빨강에서 투명한 빨강으로 가는 그라데이션은 색이 그대로인 채 흐려지기만 하고, 가운데가 회색으로 비치지 않습니다. 이 방식은 Chrome 29, Firefox 36, Safari 15부터 그라데이션에 쓰입니다. 이 도구는 transparent 낱말 대신 같은 색의 불투명도 0(#00000000처럼)을 적어, 이보다 오래된 브라우저에서도 회색 띠가 생기지 않게 합니다.

사진 위에 덮개를 얹으려면 그라데이션을 사진보다 먼저 적어 위 겹이 되게 합니다. 예: background: linear-gradient(180deg, #00000000 0%, #000000BF 100%), url(photo.jpg) center / cover;. 이 도구의 글자 대비는 투명한 색을 흰 바탕 위에 겹친 색으로 재므로, 사진 위에서는 사진에서 가장 밝은 곳을 따로 확인해야 합니다.

섞는 방식: sRGB·OKLab·OKLCH

CSS Color 4는 섞는 공간을 적지 않은 그라데이션을 Oklab에서 섞게 하지만, HEX·rgb()·이름 색 같은 옛 sRGB 표기만 쓴 경우에는 하위 호환을 위해 감마 인코딩된 sRGB에서 섞게 합니다. 그래서 HEX만 적은 그라데이션은 sRGB로 섞이고, 보색처럼 멀리 떨어진 두 색 사이의 가운데가 탁해지기 쉽습니다. 아래는 파랑 #2563EB에서 노랑 #FACC15로 가는 그라데이션의 50% 지점 색입니다(채도는 OKLCH의 C).

OKLab은 밝기를 고르게 섞지만 보색 사이에서는 sRGB처럼 채도를 잃고, OKLCH는 색상 각을 돌아가며 섞어 채도를 지킵니다. 이 도구는 sRGB나 OKLab으로 섞을 때 이웃한 두 정지 색 사이의 가운데 채도가 두 색 가운데 낮은 쪽의 절반 아래로 떨어지면 알리고, 한 번에 OKLCH로 바꾸는 단추를 보여 줍니다.

OKLab·OKLCH를 고르면 CSS는 두 줄이 됩니다. 앞 줄은 섞는 공간을 모르는 브라우저가 쓰는 sRGB 줄이고, 뒤 줄은 in oklch가 든 줄입니다. 새 브라우저는 뒤 줄을, 옛 브라우저는 뒤 줄 전체를 버리고 앞 줄을 씁니다. CSS 변수를 켜면 이 순서가 통하지 않습니다. CSS Custom Properties 명세에서 var()를 바꿔 넣은 값이 문법에 맞지 않으면 그 선언은 '계산 시점에 무효'가 되고, 앞 줄로 돌아가지 않고 초기값이 됩니다. 그래서 변수 코드는 sRGB 값을 먼저 변수에 넣고 @supports 안에서 OKLCH 값으로 바꿉니다. 흰색·검은색·회색 정지 색은 OKLCH 줄에서 oklch(1 0.002 264.05)처럼 눈에 띄지 않는 채도와 옆 색의 색상 각을 붙여 적습니다. Chrome이 채도 0인 색의 색상 각을 명세와 다르게 처리해 가운데 색이 달라지는 것을 2026-10-20에 확인했기 때문입니다.

쓰는 곳별 CSS의 차이

• 글자: 배경을 깔고 background-clip: text로 글자 모양만 남긴 뒤 글자색을 투명하게 합니다. Chrome·Edge는 120부터 접두사 없는 background-clip: text를 지원하고 그 전에는 -webkit-background-clip만 알아서, 코드에 두 줄을 함께 둡니다. background 줄임 속성은 자르기 설정까지 초기값으로 되돌리므로 자르기 줄은 반드시 배경 줄 뒤에 와야 합니다. 제목처럼 줄 전체 폭을 차지하는 요소에 쓰면 그라데이션이 글자가 아닌 줄 폭에 맞춰 펼쳐져 일부 색만 보이므로, 필요하면 display: inline-block이나 width: fit-content를 더합니다.
• 테두리: 투명한 테두리를 두고 배경을 두 겹 깝니다. 안쪽 겹(단색)은 padding-box, 바깥 겹(그라데이션)은 border-box까지 칠합니다. CSS Backgrounds 명세에서 줄임 속성에 상자 값을 하나만 적으면 그 값이 칠하는 기준과 자르는 범위를 함께 정하므로 이 두 낱말로 충분합니다. 이 방식은 border-radius를 따르지만, border-image는 명세상 둥근 모서리의 영향을 받지 않아 모서리가 각지게 남습니다. 복사되는 코드의 안쪽 색은 흰색(#FFFFFF)이므로 어두운 화면에서는 그 자리의 바탕색으로 바꿔야 합니다. 안쪽을 투명하게 두려면 mask-composite로 가운데를 도려내는 방법이 있으며, 접두사 없이 Chrome 120, Firefox 53, Safari 15.4부터 지원됩니다.
• 버튼: 배경 코드에 둥근 모양과 여백을 더하고, 그라데이션 전체에서 대비가 더 높은 쪽(흰색이나 검은색)을 글자색으로 적습니다. 버튼 글자는 대개 작으므로 4.5:1을 넘는지 보세요.
• 움직임: 배경 크기를 200% 200%로 키우고 background-position을 그라데이션이 흐르는 쪽으로 옮기는 @keyframes를 붙입니다. 선형 120deg라면 7% 25%에서 93% 75%로 오가며, 상자에는 그라데이션의 절반 정도씩만 보입니다. 동작 줄이기를 켠 사용자에게는 멈추도록 prefers-reduced-motion 규칙을 함께 넣습니다. WCAG 2.2 성공 기준 2.2.2는 저절로 시작해 5초 넘게 다른 내용과 함께 움직이는 것에 멈추거나 숨기는 방법을 두라고 하므로, 넓은 배경에 움직임을 쓰면 멈춤 단추를 따로 두는 편이 안전합니다.

예시 8개의 흰 글자·검은 글자 최저 대비는 아래와 같습니다. 본문 글자는 WCAG 2.2 성공 기준 1.4.3에 따라 4.5:1 이상, 큰 글자(18pt 또는 굵은 14pt 이상)는 3:1 이상이어야 합니다. 대비는 정지 색과 그라데이션 선을 1,024단계로 나눈 모든 색으로 재고, 소수 첫째 자리에서 내려 판정합니다.

브라우저 지원

그래서 이 도구는 -webkit-linear-gradient 같은 그라데이션 접두사 줄을 넣지 않습니다. 접두사가 필요한 곳은 글자 쓰임의 -webkit-background-clip 한 줄뿐입니다. Firefox는 49부터 background-clip: text를 쓰지만, 고정 배경(background-attachment: fixed)이나 여러 겹 배경에서는 제대로 그리지 못하는 경우가 MDN에 적혀 있습니다.

자주 틀리는 경우

• to top right를 45deg로 바꿔 적기: 정사각형이 아니면 방향이 달라집니다. 위 표처럼 16:9 상자에서는 약 29.4deg입니다.
• 글자 코드에서 배경 줄을 맨 뒤에 두기: background 줄임 속성이 자르기 설정을 지워 글자 대신 상자 전체가 칠해집니다.
• 테두리 안쪽 색을 그대로 두기: 어두운 화면이나 색 있는 카드에서는 흰 안쪽이 그대로 드러납니다. 안쪽 색을 그 자리의 바탕색으로 바꾸세요.
• 반복을 켜고 첫 위치 0%, 끝 위치 100%를 그대로 두기: 되풀이할 자리가 없어 아무 변화가 없습니다. 무늬 한 칸의 길이만큼 끝 위치를 당기세요.
• CSS 변수에 in oklch 값만 넣기: 섞는 공간을 모르는 브라우저에서는 그라데이션이 통째로 사라집니다. 변수 코드는 sRGB 값을 먼저 두고 @supports로 바꿔야 합니다.
• 글자 대비를 한 점에서만 재기: 그라데이션의 밝은 끝에서는 통과해도 어두운 끝에서는 미달일 수 있습니다. 글자가 놓일 수 있는 범위 전체에서 가장 낮은 값을 보세요.

한계와 주의

• 위치·각도·중심은 정수(%·deg)로만 정합니다. px·em 위치, 정지 색 사이의 중간점(색 전환 힌트), longer hue 같은 색상 각 돌기 방식은 복사한 뒤 직접 고쳐야 합니다.
• 정지 색은 2개부터 10개까지 둘 수 있습니다.
• 무대의 안내선은 마우스·터치 끌기용입니다. 키보드로는 왼쪽 칸(각도·중심·방향 버튼)과 자의 손잡이로 같은 값을 바꿉니다.
• 글자 대비는 흰 글자와 검은 글자에 대해 그라데이션 전체에서 가장 낮은 값만 보며, 투명한 색은 흰 바탕 위에 겹친 색으로 잽니다. 실제 글자 위치·크기·그림자, 사진 위의 색은 반영하지 않습니다.
• 섞인 색이 sRGB 범위를 벗어나면 채널마다 잘라 계산합니다. 브라우저가 다르게 맞추면 대비 값이 조금 다를 수 있습니다.
• 테두리 코드의 두께(3px)·둥글기(12px)·안쪽 색(#FFFFFF)과 버튼 코드의 여백은 고정값입니다. 복사한 뒤 쓰는 곳에 맞게 바꾸세요.
• 무채색 정지 색의 OKLCH 처리 차이는 Chrome에서만 확인했습니다. Safari와 Firefox는 확인하지 않았습니다.
• 불투명도는 정수(%)로 다루므로, 8자리 HEX를 붙여 넣으면 끝 두 자리가 1만큼 바뀔 수 있습니다(예: DD → DE). 80·CC·33처럼 정수 %에 맞는 값은 그대로입니다.
• 움직임을 켜면 배경 크기가 200%가 되어 반복 무늬의 폭과 원형 그라데이션의 크기도 두 배로 보입니다. 반복 무늬에 움직임을 쓸 때는 끝 위치를 절반으로 줄이세요.

기준일 CSS 명세·브라우저 지원·WCAG 출처는 2026-10-20에 확인했습니다. 표의 길이·반지름·대비·가운데 색은 이 도구의 계산 코어로 직접 구한 값입니다.

출처

• 01W3C: CSS Images Module Level 3§3.1 0deg는 위쪽·시계 방향, 그라데이션 선 길이 abs(W·sinA) + abs(H·cosA), 모서리 낱말의 각도, §3.2 크기 낱말과 반지름 0, §3.3 반복, §3.4.2 같은 위치의 정지 색, §3.4.3 위치 고치기(fixup)
• 02W3C: CSS Images Module Level 4원뿔 그라데이션(시작 0deg 위쪽·시계 방향), 위치 두 개를 가진 정지 색, 섞는 공간 지정 문법
• 03W3C: CSS Color Module Level 4§13.2 기본 Oklab·옛 sRGB 표기는 감마 인코딩 sRGB에서 섞음, §13.4 투명한 색은 premultiplied로 섞음, §13.5 색상 각 기본 shorter
• 04W3C: CSS Backgrounds and Borders Module Level 3background 줄임 속성의 상자 값 하나가 background-origin과 background-clip을 함께 정함, 테두리 그림은 border-radius의 영향을 받지 않음
• 05W3C: CSS Custom Properties for Cascading Variables Module Level 1§3.1 var()를 바꿔 넣은 값이 문법에 맞지 않으면 계산 시점에 무효
• 06MDN: linear-gradient()브라우저 호환성 표: 섞는 공간 지정 Chrome 111·Firefox 127·Safari 16.2, 위치 두 개 Chrome 71·Firefox 64·Safari 12.1, premultiplied Chrome 29·Firefox 36·Safari 15
• 07MDN: background-clip브라우저 호환성 표: 접두사 없는 text 값 Chrome·Edge 120, Firefox 49(일부 경우 제외), Safari 14
• 08W3C: WCAG 2.21.4.3 대비 4.5:1(큰 글자 3:1), 2.2.2 저절로 시작해 5초 넘게 움직이는 내용에는 멈추기·숨기기 방법
• 09MDN: conic-gradient()브라우저 호환성 표: conic-gradient() Chrome 69·Firefox 83·Safari 12.1, 위치 두 개를 가진 정지 색 Chrome 72·Firefox 83

자주 묻는 질문

함께 쓰는 도구