그래디언트 CSS 생성기

비주얼 에디터로 멋진 CSS 그래디언트를 디자인하세요. 최대 10개 색상 정지점으로 선형, 방사형, 원뿔형 그래디언트를 지원합니다. CSS 또는 Tailwind 클래스를 복사하세요. 12개 내장 프리셋.

그래디언트 CSS 생성기는 무엇인가요?

그래디언트 CSS 생성기는 CSS 한 줄을 수동으로 작성하지 않고도 아름다운 CSS 그래디언트 배경을 만들고 프로덕션 준비된 코드를 복사할 수 있는 시각적 디자인 도구입니다. CSS 그래디언트는 현대 웹 디자인에서 가장 많이 사용되는 시각적 요소 중 하나입니다. 히어로 섹션 배경, 버튼 호버 상태, 카드 배경, 텍스트 효과, 구분선 장식, 로딩 스켈레톤 애니메이션, 전체 페이지 색상 체계로 나타납니다. CSS는 세 가지 그래디언트 유형을 기본 지원합니다: linear-gradient()(임의의 각도로 직선 색상 전환), radial-gradient()(중심점에서 발산하는 원형 또는 타원형 색상 전환), 더 새로운 conic-gradient()(색상 휠이나 파이 차트처럼 중심점 주위로 회전하는 색상 전환). 각 유형은 복잡한 다색 전환을 허용하는 여러 색상 정지점을 지원합니다. CSS 그래디언트를 수동으로 작성하는 것은 번거롭고 결과가 올바르게 보일 때까지 값을 반복해야 합니다. 라이브 미리보기가 있는 시각적 편집기는 이것을 완전히 없앱니다.

그래디언트 CSS 생성기 사용 방법

영감을 위해 프리셋 중 하나를 선택하거나 '커스텀'을 클릭하여 처음부터 만드세요. 선택기에서 그래디언트 유형을 선택하세요: 방향성 그래디언트는 선형(0~360° 임의 각도 선택), 원형 그래디언트는 방사형(중심 위치와 모양 사용자화), 회전형 그래디언트는 원뿔형. 색상 정지점 편집기는 드래그 가능한 정지 마커가 있는 그래디언트 바를 보여줍니다. 색상 선택기로 색상을 편집하려면 정지점을 클릭하고, + 버튼으로 기존 정지점 사이에 새 색상 정지점을 추가하고, 바를 따라 정지점을 드래그하여 재배치하고, × 버튼으로 정지점을 제거하세요(최소 2개 정지점 필요). 라이브 미리보기 패널은 대형 배경 견본에 적용된 그래디언트를 보여줍니다. 미리보기 아래의 출력 패널에는 스타일시트에 직접 붙여넣을 수 있는 최종 CSS 속성이 표시됩니다. Tailwind 탭은 동등한 유틸리티 클래스 또는 임의 값 구문을 보여줍니다.

자주 묻는 질문

어떤 CSS 그래디언트 유형이 지원되나요?

세 가지 그래디언트 유형이 지원됩니다: 선형 그래디언트(linear-gradient())는 지정된 각도로 직선으로 색상을 전환합니다. 0°는 아래에서 위, 90°는 왼쪽에서 오른쪽, 135°는 대각선. 방사형 그래디언트(radial-gradient())는 중심점에서 원형 또는 타원형 패턴으로 방사됩니다. 원뿔형 그래디언트(conic-gradient())는 색상 휠처럼 중심점 주위로 색상을 회전시킵니다. 파이 차트, 도넛 차트, 스피너 애니메이션에 이상적입니다. 세 유형 모두 타일 패턴을 위한 반복 변형을 지원합니다.

두 가지 색상 이상의 멀티 컬러 그래디언트를 만들려면 어떻게 하나요?

그래디언트 바의 + 버튼이나 기존 색상 정지점 사이를 클릭하여 추가 정지점을 추가하세요. 각 정지점은 독립적인 색상과 위치(0~100%)를 가집니다. 예를 들어 세 가지 색상의 일몰 그래디언트는 0%에서 주황색, 50%에서 분홍색, 100%에서 보라색을 사용할 수 있습니다. 색상 정지점은 어디든 배치할 수 있습니다. 균등하게 배치될 필요가 없습니다. 정지점을 이웃에 가깝게 드래그하면 날카로운 전환이 만들어집니다.

Tailwind CSS와 그래디언트 출력을 사용할 수 있나요?

네. Tailwind CSS v3+는 간단한 두 색상 방향성 그래디언트에 대해 bg-gradient-to-r from-purple-500 to-pink-500 같은 유틸리티 클래스로 기본 그래디언트를 지원합니다. 복잡한 다중 정지점 또는 비표준 각도 그래디언트에는 Tailwind의 임의 값 구문을 사용하세요: bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]. 생성기의 Tailwind 출력 탭은 특정 그래디언트에 적합한 클래스를 보여주며 유틸리티 클래스와 임의 값 구문 사이를 자동으로 전환합니다.

그래디언트에 투명도를 어떻게 추가하나요?

색상 선택기를 열려면 색상 정지점을 클릭한 다음 알파(불투명도) 슬라이더를 조정하세요. 알파=0인 색상 정지점은 완전히 투명하고, 알파=1은 완전히 불투명합니다. 이것은 단색이 투명으로 전환되는 페이드 아웃 효과(예: 반투명 어두운 색상에서 완전히 투명으로 페이드되는 히어로 이미지 오버레이)에 일반적으로 사용됩니다. CSS 출력에서 투명한 정지점은 rgba()나 8자리 16진수 형식(예: #667eea00은 완전히 투명한 보라색)을 사용합니다.

텍스트에 그래디언트를 사용할 수 있나요?

네, 하지만 특정 CSS 기법이 필요합니다: background를 그래디언트로 설정한 다음 background-clip: text와 -webkit-background-clip: text(Safari/Chrome용)를 적용하고, 그래디언트가 텍스트 모양을 통해 보이도록 color: transparent를 설정합니다. 이렇게 하면 인기 있는 무지개 또는 금속성 텍스트 효과가 만들어집니다. 생성기는 표준 background-image CSS를 출력합니다. 그래디언트 값을 복사한 후 스타일시트에서 텍스트 클리핑 기법을 수동으로 적용하세요.