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.

Erstellen Sie lineare oder radiale Verläufe und exportieren Sie sie als CSS, Tailwind oder PNG.

Typ

Winkel: 90°

0°90°180°270°360°

Schnelle Anleitung

Farbformat

Vorschau in Exportgröße

Rasterüberlagerung anzeigen (nur Vorschau)

Hilfreich für die Ausrichtung während der Bearbeitung. Exportierte Bilder stimmen immer mit den sichtbaren Farben überein.

Breite

Höhe

Format

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%