🌈CSS 그라데이션 생성기

색상 stop을 추가/조절하며 linear·radial 그라데이션을 시각적으로 만들고 CSS 코드를 받으세요. 미리보기 실시간 반영.

🔒 브라우저에서 처리✓ 워터마크 없음✓ 가입 불필요

사용 방법

복잡한 conic-gradient도 가능한가요?+

현재는 linear / radial만 지원합니다. conic-gradient(원형 시계방향)는 별도 입력 필요.

두 색 vs 세 색 이상 차이?+

두 색은 단순하고 깔끔, 세 색 이상은 더 풍부한 표현. 다만 너무 많으면 더러워 보이니 3~4색 이내 권장.

어떤 각도가 좋아요?+

135도(왼쪽 위 → 오른쪽 아래)가 가장 자연스럽고 흔합니다. 90도(왼→오) 또는 180도(위→아래)도 깔끔합니다.

투명한 그라데이션도 됩니까?+

각 색상 stop의 alpha(rgba)를 조절하면 됩니다. 글자 위에 어두운 그라데이션 오버레이 만들 때 유용.

다크 모드용 그라데이션 팁?+

어두운 톤(#1a1a2e → #16213e 등)이 잘 어울립니다. 너무 어둡지 않게 약간 채도를 줘야 평면적이지 않습니다.

구버전 브라우저 지원?+

현대 브라우저는 모두 표준 CSS gradient를 지원합니다. IE 같은 구버전이 필요하면 -webkit-, -moz- 같은 vendor prefix가 필요합니다.