사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

생성된 코드와 노트를 사용 전에 확인하세요.

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

두 색을 잇는 선형 그라디언트를 만들어 미리 보여 주고, 순수 CSS와 Tailwind 임의 값 배경 클래스를 모두 복사할 수 있게 해 줍니다.

기본 설정은 하늘색에서 초록으로 비스듬히 이어지는 배경을 보여 줍니다.

입력

135deg · #0ea5e9 → #22c55e

출력

background: linear-gradient(135deg, #0ea5e9, #22c55e);

색 정지점이 많은 브랜드 그라디언트는 CSS 변수로 모아 두는 편이 관리하기 쉽습니다.