다플 도구 가이드

Gradient 생성기 사용법과 활용 방법

선형 또는 방사형 그라디언트를 선택하고 시작 색상 정지점을 준비하세요. 각도, 중심과 여러 색상 정지점의 색·위치를 원하는 전환에 맞추세요. 완성된 배경을 확인하고 CSS 또는 프로젝트에 맞는 Tailwind 코드를 복사하세요.

Gradient 생성기가 필요한 경우

멀티 컬러 스탑, 각도, 타입을 자유롭게 조절해 그라디언트를 만드세요. CSS와 Tailwind 코드를 바로 복사할 수 있어요.

필요한 입력값을 준비한 다음 화면의 옵션을 목적에 맞게 설정하고 결과를 확인합니다. 중요한 작업에는 원본을 보관하고 결과를 한 번 더 검토하세요.

그라디언트, CSS gradient, linear-gradient 관련 작업에 활용할 수 있습니다. 브라우저와 입력 조건에 따라 결과가 달라질 수 있으므로 실제 사용 목적에 맞는지 확인하세요.

그라디언트에 색상을 여러 개 추가할 수 있나요?

색상 정지점을 추가하고 각 색의 위치를 조절해 두 가지 이상의 색상을 자연스럽게 연결할 수 있습니다. 정지점 위치가 가까우면 색 경계가 선명해지고 멀면 완만해지므로 퍼센트 위치를 함께 조절하세요.

그라디언트 방향과 각도를 바꿀 수 있나요?

선택한 그라디언트 유형에 맞춰 각도나 중심 위치를 조절하고 결과를 실시간으로 확인할 수 있습니다. 선형 각도와 방사형 중심은 서로 다른 속성을 사용하므로 유형을 바꾸면 이전 설정의 표현 방식도 달라질 수 있습니다.

생성 결과를 Tailwind에서도 사용할 수 있나요?

화면에서 제공하는 CSS와 Tailwind 형식의 결과를 확인하고 프로젝트에 맞는 코드를 복사할 수 있습니다. 임의 값 문법의 허용 여부와 색상 설정은 Tailwind 버전·빌드 설정에 따라 다르므로 컴파일 결과를 확인하세요.

설명을 확인했다면 직접 실행해 보세요.