CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 시각적으로 디자인하세요: 종류를 고르고, 각도나 형태를 조정하고, 원하는 만큼 색상 스톱을 추가해 실시간 미리보기로 확인합니다. CSS 규칙 또는 Tailwind 임의값 클래스 형태로 복사할 수 있습니다.
—
종류
색상 스톱
- 0%
- 100%
미리보기
CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Tailwind
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
사용법
- 선형 또는 방사형을 고르세요.
- 각도(선형)나 형태(방사형)를 조정하세요.
- 색상 스톱을 편집하고 위치 슬라이더를 움직이세요.
- CSS 규칙이나 Tailwind 클래스를 복사하세요.
자주 묻는 질문
- Tailwind 임의값은 왜 쓰나요?
- bg-[…] 형태의 Tailwind 임의값 클래스를 쓰면 별도 CSS 파일 없이 Tailwind 프로젝트에 그라디언트를 바로 적용할 수 있습니다.
- 색상 스톱은 몇 개까지 가능한가요?
- 원하는 만큼 — 일반적으로 3–5개가 보기 좋지만 수에 제한이 없습니다.
- 그라디언트가 저장되나요?
- 마지막 디자인이 브라우저 로컬 저장소에 자동 저장되어 다음 방문 때 복원됩니다.
- 왜 Tailwind 클래스에 밑줄이 있나요?
- Tailwind는 공백을 클래스 구분자로 취급하므로 임의값에서는 공백 대신 밑줄을 사용합니다.
관련 도구
Conic Gradient 생성기
CSS `conic-gradient()` 비주얼 빌더 — 회전 각도·중심 위치·컬러 스톱·도형 미리보기. 파이 차트·링 차트·체커보드 패턴·컬러 휠에 유용.
색상 0 0
컬러 토큰 익스포터
컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android `colors.xml`로 익스포트. 라이브 미리보기 스워치.
색상 0 0
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상 0 0
CSS 블렌드 모드 시뮬레이터
W3C 컴포지팅 표준의 16 가지 mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity 등)를 두 색에 적용한 결과를 한눈에 비교하고, 각 모드별 CSS 스니펫을 복사할 수 있습니다.
색상 0 0
컬러 믹서
두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.
색상 0 0
컬러 보간 / 그라데이션 스텝
두 헥스 컬러 → N개 이산 중간 스텝 — sRGB·linear RGB·OKLab·HSL — 옵션 이징.
색상 0 0