CSS-Verlauf-Generator – Lineare, radiale und konische Gradients
Baue in Sekunden schöne Verlaufshintergründe. Wähle linear, radial oder konisch, bis zu sechs Farben, verschiebe die Positionen und kopiere fertiges CSS – oder lade den Verlauf als Full-HD-PNG.
Verlaufsart wählen, Winkel oder Position einstellen, Farben der Stopps festlegen und an die gewünschte Stelle ziehen. Vorschau und CSS aktualisieren sich sofort. Kopiere den background-Code (inklusive einfarbigem Fallback) oder klicke auf „PNG herunterladen“ für ein 1920×1080-Bild.
So funktioniert: CSS-Verlauf-Generator
- Vorlage wählen oder linear, radial bzw. konisch einstellen.
- Winkel (linear, konisch) oder Form und Position (radial) festlegen.
- Farben ändern und Stopps verschieben.
- Bis zu sechs Farben hinzufügen oder „Zufällig“ drücken.
- CSS kopieren oder PNG herunterladen.
Die drei Verlaufsarten
| Art | CSS-Funktion | Typischer Einsatz |
|---|---|---|
| Linear | linear-gradient(135deg, …) | Hintergründe, Buttons, Hero-Bereiche |
| Radial | radial-gradient(circle, …) | Lichtkegel, Glanz, Vignetten |
| Konisch | conic-gradient(from 0deg, …) | Tortendiagramme, Farbräder |
Bei linearen Verläufen zeigt 0deg nach oben, Winkel drehen im Uhrzeigersinn: 90deg verläuft von links nach rechts, 180deg von oben nach unten. Jeder Farbstopp hat eine Position in Prozent; zwei Stopps an derselben Stelle ergeben eine harte Kante statt Übergang – praktisch für Streifen.
So gelingen Verläufe
- Nimm Farben, die im Farbkreis nah beieinander liegen (Blau → Lila, Orange → Pink), für sanfte Übergänge.
- Mische Komplementärfarben (Rot → Grün) nicht direkt, die Mitte wird grau. Setze einen dritten Stopp dazwischen.
- Halte Text lesbar und prüfe hellste und dunkelste Stelle mit dem Farbkontrast-Checker.
- Setze vor den Verlauf eine Vollfarbe als Fallback – das generierte CSS macht das automatisch.
Als Bild herunterladen
Der PNG-Export zeichnet denselben Verlauf auf eine 1920 × 1080 große Fläche – ideal für Präsentationshintergründe, YouTube-Thumbnails, Hintergrundbilder oder Platzhalter. Passe die Größe danach mit dem Bildgröße ändern an.
Browserunterstützung
Lineare und radiale Verläufe funktionieren in allen aktuellen Browsern ohne Präfix, konische in den aktuellen Versionen von Chrome, Edge, Firefox und Safari. Da der Browser den Verlauf berechnet, bleibt er auf jedem Bildschirm scharf und kostet keine Ladezeit.
Weitere Design-Tools
Passende Farbschemata erzeugst du im Farbpaletten-Generator, kombinierst den Verlauf mit einem Schatten oder einem Milchglas-Panel aus dem Glassmorphism-Generator und rechnest Farbcodes mit HEX in RGB umrechnen um.
Ideen für den Einsatz
Ein dezenter Verlauf zwischen zwei Tönen derselben Farbe wirkt ruhig und seriös, eine kräftige Diagonale aus zwei leuchtenden Farben passt gut zu Call-to-Action-Bereichen. Legst du einen Verlauf mit transparenten Stopps über ein Foto, wird es abgedunkelt und weißer Text bleibt lesbar.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Wie erstelle ich einen Verlauf als Hintergrund?
Mit background: linear-gradient(135deg, #06b6d4, #8b5cf6). Kopiere einfach einen Verlauf aus dem Generator.
Welchen Winkel sollte ich nutzen?
90deg läuft von links nach rechts, 180deg von oben nach unten, 135deg diagonal von oben links.
Kann ich mehr als zwei Farben nutzen?
Ja, bis zu sechs Farbstopps mit eigener Position.
Wie lade ich einen Verlauf als Bild herunter?
Klicke auf „PNG herunterladen“ für ein 1920×1080-Bild des aktuellen Verlaufs.
Funktionieren CSS-Verläufe überall?
Linear und radial in allen Browsern, konisch in allen aktuellen Browsern.
Zuletzt aktualisiert: