모든 처리는 브라우저 내부에서 실행됩니다 — 파일·입력은 서버로 전송되지 않습니다.
그라디언트 종류(선형 또는 방사형)를 고른 뒤 그라디언트 바 위에서 컬러 스톱을 드래그해 위치를 조정합니다. 클릭으로 스톱을 추가·삭제하고, 픽커로 색상을 바꾸고, 선형 그라디언트는 각도 핸들을 드래그하거나 도수를 직접 입력해 회전할 수 있습니다. CSS 패널은 현대 `linear-gradient(angle, color stop, ...)` 구문으로 `background:` 선언을 출력하며 스타일시트, Tailwind의 `bg-[...]` 임의 값, CSS-in-JS 템플릿 리터럴에 그대로 붙여 넣을 수 있습니다.
히어로 섹션 배경, 버튼 호버 상태, 플레이스홀더 이미지, 카드 강조 등을 디자인할 때 사용하세요. 현대 웹 디자인은 2010년대 후반에 유행했던 4 스톱이나 방사형 + 코닉의 화려한 패턴보다 절제된 2 스톱 그라디언트를 선호합니다. 그래도 적절한 그라디언트는 평탄한 단색이 줄 수 없는 깊이를 더해 줍니다. 라이브 미리보기는 현대 주요 브라우저가 렌더링하는 결과(CSS Images Module Level 3 준수)와 일치합니다. 옛 `-webkit-`·`-moz-` 프리픽스는 브라우저 지원 범위가 모두 2017년 이후로 옮겨 갔기 때문에 더 이상 필요 없습니다.
type: linear angle: 135deg stops: #1e293b 0%, #0f172a 100%
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
현대적인 "테크 다크" 히어로 배경입니다. 135°는 좌상에서 우하로 흐르며 대부분의 레이아웃에 가장 잘 어울리는 대각선 방향입니다. 두 스톱은 가까운 슬레이트 음영으로 전경 콘텐츠와 충돌하지 않으면서 깊이를 더합니다. Tailwind 사용자는 임의 값으로 `bg-[linear-gradient(135deg,#1e293b_0%,#0f172a_100%)]`처럼 붙일 수 있습니다 — Tailwind 값 파서가 공백으로 분리하므로 공백은 언더스코어로 바꿉니다.
type: linear angle: 180deg stops: #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%
background: linear-gradient(180deg, #ff4b1f 0%, #ff9068 40%, #ffd29d 70%, #fff5e1 100%);
세로 방향의 선셋 효과 — 위쪽의 주황이 아래로 가며 크림색으로 페이드됩니다. 등간격이 아닌 스톱(0%·40%·70%·100%)이 위쪽의 밝은 주황을 압축하고 바닥의 크림을 넓고 평평한 영역으로 늘립니다. 실제 하늘의 그라디언트와 닮았습니다. 다중 스톱 그라디언트는 일러스트성 배경이나 장식 배너에 적합하지만 콘텐츠 배경에는 부적합합니다 — 산만함이 본문 가독성과 충돌합니다.
type: radial shape: circle at center stops: rgba(255,255,255,0.4) 0%, transparent 70%
background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
알파 채널 스톱을 사용한 방사형 그라디언트는 임의의 배경 위에 겹쳐지는 "스포트라이트" 효과를 만듭니다. `radial-gradient(circle at center, ...)`는 하이라이트를 중앙에 두고, `at top right`로 포커스를 옮길 수 있습니다. 콤마로 구분된 다중 레이어로 베이스 배경과 결합할 수 있습니다 — `background: radial-gradient(...) , linear-gradient(...)`. 첫 그라디언트가 위에 놓이고 알파를 통해 아래 레이어가 비쳐 보입니다.
`0deg`는 "to top"을 의미하며 그라디언트는 바닥에서 시작해 위에서 끝납니다. CSS 그라디언트 각도는 거기서 시계 방향으로 돌며 `90deg`는 "to right"(좌 → 우), `180deg`는 "to bottom"(상 → 하), `270deg`는 "to left"입니다. 수학 관례(0°가 오른쪽, 반시계 방향이 양수)와는 다르지만 "위가 북쪽"이라고 생각하는 사람의 직관에 맞습니다. 기본 방위와 중간 방위에는 도수 대신 `to top`·`to right`·`to bottom left` 같은 키워드도 쓸 수 있습니다.
필요 없습니다. 프리픽스 없는 `linear-gradient`·`radial-gradient`는 2017년 이후 모든 주요 브라우저에서 지원됩니다(Chrome 26·Firefox 16·Safari 7·Edge는 출시 때부터). caniuse 기준이 2017년 3분기 이후라면 프리픽스는 떼도 됩니다. 예외는 **conic-gradient** 함수로 브라우저별 2019~2021년에 출시되었습니다. 레거시 브라우저 폴백에는 conic 앞에 프리픽스 없는 솔리드 컬러나 선형 그라디언트를 레이어로 두면, 브라우저는 이해할 수 있는 것을 사용합니다.
CSS 그라디언트는 기본으로 sRGB 색공간에서 보간하지만 sRGB는 감마 인코드되어 있습니다. 파랑(`#0000FF`)과 노랑(`#FFFF00`)의 중간은 sRGB에서 탁한 회색(`#808080`)이 되고, 지각이 기대하는 선명한 중간색이 나오지 않습니다. 해결책은 `linear-gradient(in oklab, blue, yellow)`(CSS Color Module Level 4, Chrome 111 이상·Firefox 113 이상·Safari 16.4 이상 지원)을 쓰는 것입니다. 지각적으로 균등한 공간에서 보간되어 선명한 녹색이 중점에 나타납니다. 옛 브라우저에는 중간 스톱을 손으로 추가하세요 — `blue 0%, #00b487 50%, yellow 100%`.
CSS의 `transition`이나 `@keyframes`로 두 `linear-gradient` 값 사이를 직접 보간할 수 없습니다. 그라디언트는 이미지로 다뤄지고 브라우저가 불투명한 단위로 취급하기 때문입니다. 우회책으로는 더 큰 그라디언트 이미지로 `background-position`을 애니메이션하기, `background-size`를 애니메이션하기, CSS 커스텀 프로퍼티와 `@property`를 결합해 그라디언트 스톱을 애니메이션 가능한 색상으로 선언하기 등이 있습니다. 복잡한 애니메이션에는 `<animate>`를 가진 SVG의 `<linearGradient>`나 canvas·WebGL 렌더링이 완전한 통제를 제공합니다. 호버 상태의 정적 그라디언트는 `background-image` 스왑으로 동작하지만 교체는 즉시이고 페이드는 없습니다.
현대 하드웨어에서는 정적 그라디언트는 단색과 측정 가능한 차이가 없습니다. GPU가 그라디언트를 한 번 레이어에 그리고 결과를 재사용합니다. 그라디언트 스톱 애니메이션이나 `background-position` 슬라이드는 프레임마다 비용이 더 들기 때문에 풀 페이지 배경이 아닌 작은 요소(버튼·배지)에 한정하고 `will-change: background-position`으로 컴포지터에 힌트를 주세요. 고비용이 되는 경우는 브라우저가 자주 다시 그리는 요소(스크롤 연동이나 레이아웃 스래싱을 동반한 애니메이션) 위에 그라디언트가 얹힐 때입니다. 무거운 그라디언트가 느린 스크롤 경로에 있다면 DevTools에서 프로파일하세요.
코닉 그라디언트(`conic-gradient(red, yellow, green, blue, red)`)는 중심점 주위에서 색을 회전시킵니다 — 원그래프나 시계 문자판 같은 느낌입니다. 실용 예: SVG 없는 진행 링(`conic-gradient(blue 0% 60%, gray 60% 100%)`로 60% 진행 표시), 모서리를 도는 그라디언트 보더(`mask`와 결합), 홀로그래픽 포일 풍 코닉 배경 등입니다. CSS 지원은 Chrome 69 이상·Firefox 83 이상·Safari 12.1 이상이며 2021년 이후 보편적입니다. 본 도구는 선형과 방사형에 집중합니다. 코닉 그라디언트는 손으로 구문을 작성하거나 전용 코닉 에디터를 사용하세요.
CSS 그라디언트는 함수(`linear-gradient(...)`·`radial-gradient(...)`·`conic-gradient(...)`)에서 생성되는 *이미지*이지 단색이 아닙니다. `background-image`와 같은 프로퍼티 슬롯에 놓이고 콤마로 겹칠 수 있으며 래스터 이미지와 같은 블렌드 모드·마스크 프로퍼티에 따릅니다. CSS Images Module Level 3(W3C 권고, 2017년)이 선형과 방사형을 표준화하고, Level 4(워킹 드래프트, 2018년 이후)가 코닉과 CSS Color Module Level 4와 짝지어진 `in <color-space>` 보간 힌트를 추가했습니다.
**3가지 그라디언트 함수**가 거의 모든 사용 사례를 커버합니다. **선형**은 임의 각도의 직선을 따라 흐르고 `to <side>` 키워드나 `<angle>deg` 구문으로 선 방향을 지정하며 선상의 스톱이 색 전환을 정의합니다. **방사형**은 중심점에서 바깥으로 흐르고 `circle`·`ellipse`, `at <position>`, 사이징 키워드(`closest-side`·`farthest-corner` 등)로 모양을 정합니다. **코닉**은 중심점 주위에서 색을 회전시키며 SVG 없이 원그래프·진행 링·회전 효과를 만들 수 있습니다. 모든 함수가 같은 컬러 스톱 구문(`color percent`, 퍼센트 생략 시 등간격)을 받습니다.
그라디언트 설계에 관여하는 인접 개념이 3가지 있습니다. **색 보간**은 역사적으로 sRGB만이었고 색상이 크게 떨어진 색을 가로지를 때 중점이 탁해지는 문제가 있었습니다. CSS Color Level 4의 `in oklab`·`in oklch` 보간 힌트(Chrome 111 이상·Firefox 113 이상·Safari 16.4 이상)가 이를 해결합니다. **성능**은 정적 그라디언트에서는 GPU가 가속하지만 레이아웃을 흔드는 애니메이션에서는 고비용입니다 — 스톱 색을 직접이 아닌 `background-position`을 애니메이션하세요. **접근성**은 간과되는 관점이며, 텍스트 뒤의 그라디언트는 단색 배경과 같은 WCAG 4.5:1 대비를 필요로 하고, 가시 영역 전체에 걸쳐 그 비율을 유지해야 합니다. "가장 겹칠 만한 구역"만이 아니라 그라디언트의 양 끝에 대비 검사기를 실행해 확인하세요.
background: linear-gradient(135deg, #06b6a4 0%, #3b82f6 100%);
