What types of gradients can I create?

You can create both static gradients (linear and radial) for CSS/PNG export, and fluid animated gradients using Three.js for video export.

Can I export gradients as CSS code?

Yes, static gradients can be exported as CSS, Tailwind CSS, or PNG images. Fluid gradients can be exported as videos or static images.

Yes, all gradient tools are completely free to use with no limitations or registration required.

선형 또는 방사형 그라디언트를 만들고 CSS, Tailwind 또는 PNG로 내보내세요.

타입

각도: 90°

0°90°180°270°360°

Quick Directions

색상 포맷

Preview at export size

격자 오버레이 표시 (미리보기 전용)

편집 시 정렬에 도움이 됩니다. 내보낸 이미지는 항상 표시된 색상과 일치합니다.

너비

높이

포맷

CSS

.gradient {
  background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}

Tailwind CSS

bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]

1920×1080

0%50%100%

Color

Position: 0%

Opacity: 100%