CSS 그라디언트 생성기

개발자 유틸리티

실시간 미리보기와 복사 가능한 CSS로 선형 또는 방사형 CSS 그라디언트를 디자인하세요.

사용 방법

Build a gradient

Pick linear or radial, adjust the angle for linear gradients and choose the start and end colors. The preview and CSS update live.

Choose linear or radial.
Set the angle and two colors.
Copy the generated CSS declaration.

Using the CSS

The output is a single background declaration. Paste it into a CSS rule, inline style or style block.

자주 묻는 질문

What does the angle mean?

The angle controls the direction of a linear gradient in degrees, where 0deg points up and 90deg points right.

Can I add more color stops?

This generator creates two-stop gradients. Add extra stops manually to the copied CSS.

관련 도구

색상 팔레트 생성기 모든 색상에서 밝은 색조, 어두운 색조, 유사색, 보색, 삼각 배색을 생성합니다. CSS 박스 섀도 생성기 오프셋, 흐림, 확산, 색상 슬라이더로 박스 그림자를 만들고 CSS를 복사하세요. 색상 변환기 실시간 미리보기와 함께 색상을 HEX, RGB, HSL 사이에서 변환합니다. UUID / GUID 생성기 무작위 버전 4 UUID를 생성하고 하나씩 또는 일괄로 복사합니다. 해시 생성기 모든 텍스트의 MD5, SHA-1, SHA-256, SHA-512 다이제스트를 계산합니다. 타임스탬프 변환기 Unix 타임스탬프, ISO 8601, 사람이 읽을 수 있는 현지 날짜 사이를 변환합니다.