CSS 그라디언트 생성기

사용법

1. 선형 또는 방사형을 고르세요.
2. 각도(선형)나 형태(방사형)를 조정하세요.
3. 색상 스톱을 편집하고 위치 슬라이더를 움직이세요.
4. CSS 규칙이나 Tailwind 클래스를 복사하세요.

자주 묻는 질문

Tailwind 임의값은 왜 쓰나요?

bg-[…] 형태의 Tailwind 임의값 클래스를 쓰면 별도 CSS 파일 없이 Tailwind 프로젝트에 그라디언트를 바로 적용할 수 있습니다.

색상 스톱은 몇 개까지 가능한가요?

원하는 만큼 — 일반적으로 3–5개가 보기 좋지만 수에 제한이 없습니다.

그라디언트가 저장되나요?

마지막 디자인이 브라우저 로컬 저장소에 자동 저장되어 다음 방문 때 복원됩니다.

왜 Tailwind 클래스에 밑줄이 있나요?

Tailwind는 공백을 클래스 구분자로 취급하므로 임의값에서는 공백 대신 밑줄을 사용합니다.

관련 도구