CSS-Verlauf Generator
Gestalten Sie atemberaubende CSS-Verläufe mit Live-Vorschau und sofortigem Code-Export.
Was ist das?
Ein **CSS-Verlauf Generator** ist ein visuelles Tool, mit dem Sie lineare, radiale und konische Verläufe gestalten und sofort den CSS-Code erhalten können, den Sie für Ihre Website oder App benötigen. Anstatt Verlaufssyntax manuell zu schreiben und anzupassen, können Sie Farben, Stopps, Winkel und Positionen über eine Point-and-Click-Oberfläche anpassen und dann das fertige CSS mit einem Klick kopieren. CSS-Verläufe sind eine leistungsstarke Möglichkeit, Hintergründen, Schaltflächen, Texten, Rändern und anderen Elementen Tiefe und visuelles Interesse zu verleihen, ohne auf Bilddateien angewiesen zu sein. Da sie vom Rendering-Engine des Browsers generiert werden, skalieren sie perfekt auf jede Auflösung und sind extrem leichtgewichtig — ideal für modernes responsives Design. Dieser kostenlose, browserbasierte Generator unterstützt alle drei CSS-Verlaufstypen: **linear-gradient** (geradlinige Farbübergänge), **radial-gradient** (kreisförmige oder elliptische Farbausstrahlungen von einem Mittelpunkt) und **conic-gradient** (Tortendiagramm-artige Farbrotation um einen Mittelpunkt).
So wird es verwendet
- Wählen Sie einen Verlaufstyp: Linear, Radial oder Konisch.
- Klicken Sie auf einen Farbstopp, um den Farbwähler zu öffnen und Ihre Farbe auszuwählen. Ziehen Sie Stopps entlang der Leiste, um sie neu zu positionieren.
- Fügen Sie weitere Farbstopps hinzu, indem Sie auf die "+"-Schaltfläche klicken, oder entfernen Sie sie, indem Sie auf das "×" eines Stopps klicken.
- Für lineare Verläufe passen Sie den Winkelregler an (0°–360°). Für radiale wählen Sie Form und Größe. Für konische legen Sie den Startwinkel fest.
- Sehen Sie sich Ihren Verlauf live im Vorschaufenster an. Wenn Sie zufrieden sind, klicken Sie auf "CSS kopieren", um den einsatzbereiten Code zu kopieren.
Warum dieses Tool
CSS-Verläufe sind seit über einem Jahrzehnt ein Grundbestandteil des modernen Webdesigns, aber die Syntax von Hand zu schreiben — besonders für komplexe Verläufe mit mehreren Stopps — ist mühsam und fehleranfällig. Dieser Generator beseitigt diese Reibung vollständig. Die visuelle Oberfläche erleichtert das Experimentieren: Probieren Sie verschiedene Farbkombinationen aus, passen Sie Stoppositionen an und vergleichen Sie Verlaufstypen in Echtzeit. Das ist wertvoll, ob Sie einen Hero-Hintergrund für eine Landing Page, einen Button-Hover-Zustand oder einen künstlerischen Texteffekt gestalten. Die Ausgabe ist produktionsfertiges CSS, das Sie direkt in jedes Stylesheet, jede CSS-in-JS-Lösung oder jedes Inline-Style-Attribut einfügen können.
Häufige Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf lässt Farben entlang einer geraden Linie von einem Punkt zum anderen übergehen. Ein radialer Verlauf strahlt von einem Mittelpunkt in einem kreisförmigen oder elliptischen Muster nach außen. Ein konischer Verlauf dreht Farben um einen Mittelpunkt wie Uhrzeiger.
Kann ich mehr als zwei Farben in einem Verlauf verwenden?
Ja. CSS-Verläufe unterstützen beliebig viele Farbstopps. Sie können so viele Farben hinzufügen, wie Sie möchten, und jeden Stopp präzise entlang der Verlaufsachse positionieren.
Funktioniert das generierte CSS in allen Browsern?
Ja. Lineare, radiale und konische Verläufe werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge) ohne Vendor-Präfixe unterstützt.
Kann ich transparente Farben in einem Verlauf verwenden?
Ja. Verwenden Sie den Alpha-Kanal im Farbwähler, um eine Farbe teilweise oder vollständig transparent zu machen. Nützlich für Verläufe, die über einem Bild oder Hintergrund zu Transparent verblassen.
Kann ich den CSS-Verlauf als Hintergrund für Text verwenden?
Ja. Wenden Sie den Verlauf auf den Hintergrund des Elements an und verwenden Sie dann `-webkit-background-clip: text` und `-webkit-text-fill-color: transparent`, um den Verlauf auf die Textform zu beschneiden.