CSS 그라디언트 생성기

실시간 미리보기 및 복사 가능한 CSS를 사용하여 선형, 방사형 및 원뿔형 그래디언트를 구축하세요. 정지점, 각도, 모양을 조정한 다음 스타일시트에 붙여넣으세요.

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

실시간 미리보기 및 복사 가능한 CSS를 사용하여 선형, 방사형 및 원뿔형 그래디언트를 구축하세요.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

그라데이션 유형과 각도 또는 위치를 선택합니다.
색상 정지점을 추가하거나 편집합니다.
생성된 CSS를 복사합니다.

How this tool works

그라데이션 유형과 각도 또는 위치를 선택합니다.
색상 정지점을 추가하거나 편집합니다.
생성된 CSS를 복사합니다.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 CSS 그라디언트 생성기를 사용하세요. 실시간 미리보기와 복사 가능한 CSS로 선형, 방사형, 원뿔형 그라디언트를 만드세요.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.