웹 개발
CSS Gradient Generator
여러 색상으로 선형, 방사형 또는 원뿔형 그라데이션을 만들고 완성된 CSS를 얻습니다.
0°는 위쪽, 이후 시계 방향입니다.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
자주 묻는 질문
선형, 방사형, 원뿔형 그라데이션의 차이는 무엇인가요?
선형 그라데이션은 선택한 각도로 직선을 따라 전환되고, 방사형 그라데이션은 중심점에서 원이나 타원 형태로 바깥쪽으로 퍼지며, 원뿔형 그라데이션은 색상환처럼 중심점 주위로 색상을 회전시킵니다.
원뿔형 그라데이션은 모든 브라우저에서 지원되나요?
현재 모든 주요 브라우저는 원뿔형 그라데이션을 지원하지만, 이는 선형이나 방사형 그라데이션보다 더 새로운 CSS 기능이므로 매우 오래된 브라우저 버전에서는 렌더링되지 않을 수 있습니다.
출력으로 무엇을 얻나요?
이 도구는 선택한 색상, 정지점, 위치로 즉시 사용 가능한 CSS background 구문을 생성하며, 이를 스타일시트에 바로 붙여넣을 수 있습니다.
repeating-linear-gradient는 일반 linear-gradient와 어떻게 다른가요?
일반 linear-gradient는 색상 순서를 요소 전체에 정확히 한 번만 늘어뜨리지만, repeating-linear-gradient는 같은 color stop 순서를 주기적으로 반복해 줄무늬나 패턴이 있는 배경을 만듭니다.
여러 그레이디언트를 배경으로 겹쳐 쌓을 수 있나요?
예, background-image 속성은 쉼표로 구분된 그레이디언트 목록을 받으며, 이는 여러 배경 이미지처럼 층층이 겹쳐집니다 — 목록의 첫 번째 항목이 맨 위에 표시됩니다.