CSS-Verlauf-Generator
Was ist CSS-Verlauf-Generator
Ein CSS-Verlauf-Generator lässt dich einen linearen oder radialen Verlauf visuell erstellen und den exakten CSS-Code kopieren. Wähle den Verlaufstyp, stelle den Winkel (linear) oder Form und Position (radial) ein, füge so viele Farbstopps hinzu wie nötig und ziehe jeden an die richtige Stelle. Die Vorschau aktualisiert sich sofort, und das Ausgabefeld zeigt immer eine fertige background-Deklaration zum Einfügen.
Verwendung
- Wähle Linear oder Radial als Verlaufstyp.
- Stelle den Winkel-Schieberegler für lineare Verläufe ein, oder wähle Form und Position für radiale.
- Lege Farbe und Position jedes Stopps fest und füge mit dem Button Farbstopp hinzufügen weitere hinzu.
- Kopiere den generierten CSS-Code aus dem Ausgabefeld und füge ihn in dein Stylesheet ein.
Wann ist es nützlich?
Baust du einen Hero-Bereich und brauchst einen sanften Verlauf von Blau zu Pink? Setze zwei Stopps bei 0% und 100%, wähle einen Winkel und kopiere background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direkt in dein CSS. Genauso praktisch für Card-Overlays, Hover-Zustände von Buttons oder einen radialen Glow hinter einem Logo, ohne die Verlaufssyntax von Hand in den Devtools anzupassen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearem und radialem Verlauf?
Ein linearer Verlauf lässt Farben entlang einer geraden Linie in einem festen Winkel ineinander übergehen, wie ein Sonnenuntergang von Orange zu Violett. Ein radialer Verlauf lässt Farben von einem Mittelpunkt aus in Kreis- oder Ellipsenform übergehen, wie ein Scheinwerfer oder ein Glow-Effekt.
Wie viele Farbstopps kann ich hinzufügen?
So viele du möchtest. Jeder Verlauf braucht mindestens zwei Stopps, um dargestellt zu werden, und du kannst mit dem Button Farbstopp hinzufügen weitere ergänzen, um mehrfarbige Übergänge wie Regenbögen oder Markenpaletten zu erstellen.
Was bedeutet der Positions-Prozentsatz bei jedem Stopp?
Die Position gibt an, wo diese Farbe entlang des Verlaufs ihre volle Stärke erreicht, von 0% (Anfang) bis 100% (Ende). Verschiebst du die Position eines Stopps, ändert sich, wo seine Farbe dominiert und wie sie sich mit den Nachbarn mischt.
Funktioniert der generierte CSS-Code in allen Browsern?
Ja. linear-gradient() und radial-gradient() sind Standard-CSS-Funktionen, die von jedem modernen Browser unterstützt werden, ganz ohne Vendor-Prefixe.
Kann ich dieses Tool mit meinem vorausgefüllten Verlauf teilen?
Ja. Die URL aktualisiert sich automatisch, während du deinen Verlauf baust. Kopiere sie aus der Adressleiste oder nutze den Teilen-Button, und wer sie öffnet, sieht genau denselben Verlauf.
Ähnliche Werkzeuge
Seitenverhältnis-Rechner
Berechne das Seitenverhältnis, finde die fehlende Breite oder Höhe und skaliere Bilder und Videos unter Beibehaltung der Proportionen. Kostenlos.
Barcode-Generator
EAN-13- oder Code-128-Barcodes online generieren. Zahl oder Text eingeben und als SVG oder PNG herunterladen. Kostenlos, ohne Anmeldung.
Base64-Decoder
Dekodiere Base64-Strings sofort zu Klartext im Browser. Unterstützt vollständige Unicode-Ausgabe mit Emojis. Kostenloser Base64-Decoder.