CSS-Verlaufsgenerator
Erstellen Sie lineare oder radiale Verläufe und exportieren Sie sie als CSS, Tailwind oder PNG.
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
Steuerung
Presets
0°90°180°270°360°
Bildgröße
Hilfreich für die Ausrichtung während der Bearbeitung. Exportierte Bilder stimmen immer mit den sichtbaren Farben überein.
Export
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]Live-Vorschau
1920×1080
Farbstopps
0%50%100%
Edit Color Stop
Anwendung
- • Füge Farbpositionen in der Zeitleiste, um Positionen anzupassen
- • Klicke auf Positionen, um sie auszuwählen und ihre Farben zu bearbeiten
- • Wähle aus vorgefertigten Farbpaletten für schnelle Farbschemata
- • Passe den Verlaufswinkel oder die Form in den Einstellungen an
- • Exportiere als PNG-Bild oder kopiere CSS/Tailwind-Code