🌈 CSS 그라디언트 생성기

linear / radial / conic 그라디언트를 시각적으로 편집. 컬러 스톱 추가 / 삭제 후 CSS 코드 복사.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 보호

・브라우저 내 처리
・입력 데이터는 서버로 전송되지 않습니다
・저장 로그 · 기록 · DB 없음
・가입 · 로그인 · 결제 불필요

종류

각도 (90deg)

컬러 스톱

프리셋

CSS

📖 자주 걸리는 지점

linear / radial / conic 각 그레이디언트를 시각적으로 편집하고 그대로 붙일 수 있는 CSS 를 내보냅니다. 여기서 출력하는 것은 기본값인 sRGB 보간 코드이며 브라우저는 두 색 사이를 빨강 · 초록 · 파랑 각 성분을 균등하게 나누는 방식으로 잇습니다. 이는 사람의 눈에 자연스러운 연결 방식이 아닙니다 — 중간색이 탁해지는 것도 줄무늬가 생기는 것도 대부분 이 한 가지에서 비롯됩니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
중간에 회색빛 띠가 생긴다	파랑 → 노랑처럼 색상환에서 마주 보는 두 색을 이으면 중간에서 채도가 떨어져 탁해집니다. sRGB 의 직선 보간은 `rgb(0 0 255)` 와 `rgb(255 255 0)` 의 중점을 `rgb(128 128 128)` — 즉 정확히 회색으로 계산하기 때문입니다. 디자인 도구의 겉모습과 CSS 의 결과가 어긋나는 원인도 여기에 있으며 Figma 나 Illustrator 는 다른 색 공간에서 보간하고 있는 경우가 있습니다.	가장 확실한 것은 중간에 컬러 스톱을 하나 더하는 것입니다. 파랑 → 노랑이라면 가운데에 초록이나 하늘색을 두면 색상환을 따라가는 자연스러운 변화가 됩니다. 지원 브라우저에 한해서는 `linear-gradient(in oklch 90deg, blue, yellow)` 처럼 보간 색 공간을 지정하는 것이 정석이며 `oklab` / `oklch` 는 명도가 지각에 맞아 탁해지지 않습니다. 다만 Safari 16.2 미만이나 오래된 Android WebView 에서는 선언째 무효가 되어 배경이 완전히 사라집니다 — sRGB 판을 먼저 쓰고 덮어쓰는 형태로 하세요.
큰 면에 쓰면 줄무늬(밴딩)가 보인다	1 채널은 0~255 의 256 단계밖에 없습니다. 화면 너비 가득 1,920px 에 명도 차가 작은 그레이디언트를 깔면 한 단계당 7~8px 의 띠가 되어 경계가 선으로 보입니다. 어두운 색일수록 두드러집니다 — 사람의 눈은 어두운 부분의 차이에 민감한데 sRGB 의 부호화는 어두운 부분에 배정하는 단계 수가 적기 때문입니다. 히어로 이미지의 배경이나 모달의 오버레이에서 자주 문제가 됩니다.	아주 옅은 노이즈를 겹치는 것이 정석적인 해결법입니다 — `background-image: url(noise.png), linear-gradient(...)` 처럼 100~200px 각의 투명 PNG(불투명도 2~4%)를 위에 깔면 계단의 경계가 시각적으로 흩어져 보이지 않게 됩니다. SVG 의 `feTurbulence` 를 데이터 URI 로 심으면 이미지 파일을 늘리지 않아도 됩니다. 또는 그레이디언트의 거리를 짧게 하세요 — 전면이 아니라 높이 300px 정도로 억제하는 것만으로 대부분 해소됩니다. 색 수를 늘려도 해결되지 않습니다(단계 수가 부족한 것이 원인이므로).
요소 크기를 바꾸면 겉모습이 달라져 버린다	`radial-gradient` 의 기본값은 `ellipse farthest-corner` 입니다. 즉 요소의 종횡비에 맞춰 타원으로 일그러지고 요소의 가장 먼 모서리에서 색이 끝나도록 매번 스케일됩니다. 카드 위에서는 깔끔한 원이던 것이 가로로 긴 히어로 영역에서는 납작한 타원이 되고 모바일에서는 세로로 길어집니다. `conic-gradient` 도 마찬가지로 정사각형이 아니면 원그래프가 타원이 됩니다. 컬러 스톱을 `%` 로 둔 경우도 기준 길이가 요소 크기이므로 같은 문제가 생깁니다.	원을 유지하고 싶다면 `radial-gradient(circle at center, …)` 라고 명시하세요. 끝나는 지점도 `closest-side` / `farthest-side` / `closest-corner` 중에서 고를 수 있으며 요소 너비에 의존시키고 싶지 않을 때는 `circle 200px at center` 처럼 절댓값으로 쓰는 것이 가장 예측하기 쉽습니다. `conic-gradient` 로 원그래프를 만든다면 `aspect-ratio: 1` 을 함께 적습니다. 확인은 반드시 브라우저 너비를 실제로 움직여 가며 하세요 — 고정 너비 미리보기만으로는 이런 종류의 붕괴를 절대 찾을 수 없습니다.

그레이디언트는 background-image 이지 background-color 가 아닙니다. background: linear-gradient(...) 라고 일괄 지정으로 쓰면 그때까지의 background-color 가 transparent 로 초기화됩니다 — 이미지 로드에 실패했을 때의 폴백 색까지 사라지므로 background-color 를 다른 줄에 먼저 써 두는 것이 안전합니다. 또 하나, 투명으로의 보간에 transparent 라고 써서는 안 됩니다. transparent 는 sRGB 에서 rgba(0,0,0,0) 즉 투명한 검정이므로 흰색 → transparent 는 도중에 회색을 지납니다. rgb(255 255 255 / 0) 처럼 같은 색의 불투명도만 0 으로 하세요. 마지막으로 브라우저의 인쇄에서는 배경 이미지가 기본적으로 꺼져 있습니다. 그레이디언트 위에 흰 글자를 올린 제목은 인쇄하면 흰 종이에 흰 글자가 되어 사라집니다.

📖 사용법

1

종류 선택

linear / radial / conic 중 선택.
2

컬러 스톱 편집

색상과 위치 조정. 추가 / 삭제 가능.
3

CSS 복사

생성된 CSS를 background에 붙여넣기.

❓ 자주 묻는 질문

데이터가 서버로 전송됩니까?

아니요. 모두 브라우저 내에서 처리됩니다.

브라우저 지원은?

linear / radial 모든 최신 브라우저. conic는 Chrome 69+ 등.

컬러 스톱은 몇 개까지?

제한 없음. 실용상 2 ~ 10개.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.