CSS 그라데이션 생성기

선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.

색상 1

색상 2

각도: 135°

background: linear-gradient(135deg, #535beb, #7c3aed);

이 도구 사용 방법

1
Click the Color 1 swatch and choose your starting color from the native color picker.
2
Click the Color 2 swatch and choose the color the gradient fades into.
3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.

CSS 그라데이션은 둘 이상의 색상 간 색상 전환입니다. 선형 그라데이션은 한 방향으로 흐르고, 방사형 그라데이션은 한 점에서 퍼져 나갑니다. 이 생성기는 일반적인 경우를 다룹니다. 사용자 정의 위치를 가진 복잡한 다중 정지점 그라데이션은 직접 만드세요.

Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.

그라데이션은 효율적인가요?▼

예. 그라데이션 이미지보다 훨씬 경제적입니다. 품질 손실 없이 어떤 크기로도 확장됩니다.

그라데이션에 애니메이션을 적용할 수 있나요?▼

그라데이션을 직접 애니메이션화하는 것은 지원되지 않습니다. JavaScript를 통해 그라데이션 속성을 애니메이션화하거나 background-position 트릭을 사용하세요.