이 도구 소개

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

사용 방법

색 두 개와 각도를 정해 그라디언트를 생성하고, 미리 보기 띠에서 느낌을 확인한 다음 background 선언이나 bg-[linear-gradient(…)] 클래스를 복사하세요.

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

입력

135deg · #0ea5e9 → #22c55e

출력

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

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

색 정지점을 두 개보다 많이 추가할 수 있나요?

이 생성기는 정지점 두 개의 선형 그라데이션을 만듭니다. 정지점이 여러 개인 브랜드 그라데이션은 결과를 복사해 직접 추가하거나 CSS 변수로 관리하세요.

Tailwind 출력은 어떻게 사용하나요?

bg-[linear-gradient(…)] 클래스를 요소에 붙이면 됩니다. Tailwind가 임의 값으로 읽으므로 설정을 바꿀 필요가 없습니다.