CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe visuell erstellen. Farbstopps hinzufügen, aus Presets wählen, als CSS, Tailwind-Konfiguration oder SVG exportieren. Als 1920×1080 PNG herunterladen.
Voreinstellungen
CSS-Verlauf-Generator — schöne Verläufe visuell erstellen
CSS-Verläufe haben Bilder für die meisten Hintergrunddesign-Aufgaben ersetzt — sie sind auflösungsunabhängig, laden sofort und können animiert werden. Dieser Generator bietet einen visuellen Editor für alle drei CSS-Verlaufstypen mit Live-Vorschau und kopierbereiter Ausgabe für CSS, Tailwind CSS und SVG.
Drei Verlaufstypen
- Linearer Verlauf — Farben entlang einer geraden Linie überblenden. Winkel (0°–360°) steuern. Am häufigsten für Hero-Hintergründe, Karten und Buttons.
- Radialer Verlauf — Farben von einem zentralen Punkt nach außen überblenden. Erzeugt Spotlight- oder kreisförmige Glüheffekte.
- Konischer Verlauf — Farben um einen zentralen Punkt wie ein Farbrad überblenden. Nützlich für Tortendiagramme und Fortschrittsanzeigen.
Exportformate
- CSS — die Standard-
background-Eigenschaft, bereit zum Einfügen in jedes Stylesheet. - Tailwind CSS — verwendet die Arbitrary-Value-Syntax:
bg-[linear-gradient(...)]. - SVG — ein in sich geschlossenes SVG mit einer linearGradient-Definition.
- PNG-Download — rendert den Verlauf auf 1920×1080 Canvas und lädt als PNG herunter. Nützlich für Social-Media-Hintergründe und Figma-Importe.
Häufige Anwendungsfälle
- Auffällige Hero-Hintergründe für Landing Pages erstellen.
- Button-Hover-Effekte und Karten-Hintergründe generieren.
- Markenfarbverläufe für Präsentationen und Social Media erstellen.
- Verlauf-Hintergrundbilder für Desktop oder Mobile exportieren.
Häufig gestellte Fragen
- Welche Arten von CSS-Verläufen kann ich erstellen?
- Lineare, radiale und konische Verläufe. Linear überträgt Farben entlang einer geraden Linie mit einstellbarem Winkel. Radial überträgt nach außen von einem Mittelpunkt. Konisch überträgt um einen Mittelpunkt wie ein Farbrad.
- Kann ich den CSS-Code direkt kopieren?
- Ja. Ein-Klick-Kopieren gibt Ihnen den vollständigen CSS-Verlaufscode, bereit zum Einfügen in jedes Stylesheet. Sie können auch als Tailwind CSS Arbitrary-Value-Syntax oder SVG exportieren.
- Unterstützt es mehrere Farbstopps?
- Ja. Fügen Sie so viele Farbstopps hinzu, wie Sie benötigen, mit voller Positionskontrolle. Jeder Stopp kann jede Farbe mit einer bestimmten Prozentposition entlang des Verlaufs sein.
- Kann ich Verläufe als Bilder exportieren?
- Ja. Laden Sie Ihren Verlauf als 1920x1080 PNG-Bild herunter, perfekt für Design-Tools wie Figma, Social-Media-Hintergründe oder Desktop-Wallpaper.
- Ist dieser Verlaufsgenerator kostenlos?
- Ja, völlig kostenlos ohne Einschränkungen, ohne erforderliche Anmeldung und ohne Wasserzeichen auf exportierten Bildern.