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°

快速指示

色彩格式

以匯出尺寸預覽

顯示網格疊加 (僅限預覽)

編輯時有助於對齊。匯出圖像始終與可見顏色相符。

寬度

高度

格式

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%