← ← 목록으로
🌈 그라디언트 생성기
CSS 그라디언트 생성 · Linear·Radial·Conic · Tailwind 코드 · 프리셋 10개
🌈 그라디언트 생성기란?
CSS 그라디언트 코드를 눈으로 보면서 만드는 무료 생성기입니다. 선형(linear), 원형(radial), 원뿔형(conic) 중에서 고르고 색상 포인트를 추가해 색을 정하며, 선형과 원뿔형은 각도를 슬라이더로 조절합니다. 결과는 바로 미리보기로 확인하고 CSS 코드를 복사해 웹페이지에 붙여 넣으면 됩니다. 프리셋과 랜덤 생성도 있어 배경 색 조합을 빠르게 찾을 수 있습니다.
주요 기능
- Linear·Radial·Conic 타입
- 색상 포인트 최대 6개
- 각도·방향 조절
- 실시간 미리보기
- CSS 코드 복사
- Tailwind CSS 코드 복사
- 프리셋 10개
- 랜덤 생성
- 패턴 오버레이
사용 방법
- 그라디언트 타입을 선택합니다
- 색상 포인트를 추가·조절합니다
- 방향과 각도를 설정합니다
- CSS 또는 Tailwind 코드를 복사합니다
활용 사례
- 웹사이트 배경 그라디언트
- 버튼·카드 배경
- 블로그 썸네일 배경
- UI 디자인 색상 탐색
자주 묻는 질문
Q. Tailwind 코드가 완전히 정확한가요?
Tailwind는 45도 단위 방향을 지원하므로 임의 각도는 근사값으로 제공됩니다.
Q. Conic 그라디언트는 모든 브라우저에서 지원되나요?
최신 브라우저(Chrome 69+, Firefox 83+, Safari 12.1+)에서 지원됩니다.
Q. 색상 포인트는 몇 개까지 넣을 수 있나요?
'색상 추가'로 여러 개를 더할 수 있습니다. 색이 많을수록 부드럽게 이어지는 정도와 코드 길이가 늘어납니다.
Q. 코드를 어떻게 적용하나요?
복사한 코드를 CSS의 background 속성에 붙여 넣으세요. 예: background: linear-gradient(90deg, #ff7e5f, #feb47b);
알아두면 좋은 점
- conic-gradient는 최신 브라우저에서 지원되며 아주 오래된 브라우저에서는 보이지 않을 수 있습니다.
- 일부 코드는 미리보기와 완전히 같지 않은 근사값일 수 있으니 실제 페이지에서 확인하세요.
🔒 개인정보 보호
ToolZip의 모든 도구는 브라우저에서만 작동합니다. 파일이나 데이터가 외부 서버로 전송되지 않으며, 회원가입이나 로그인도 필요하지 않습니다. 완전히 무료로 사용할 수 있습니다.