CSS-Verlaufsgenerator

Was ist CSS-Verlaufsgenerator?

Der CSS-Verlaufsgenerator ist ein kostenloses Online-Tool für Webdesigner und Frontend-Entwickler, die schnell einen Verlauf brauchen, ohne die Syntax von Hand zu schreiben. Wähle einen linearen, radialen oder konischen Verlauf, stelle bei linearen und konischen Typen den Winkel in Grad ein und definiere Farbstopps mit jeweils einer HEX-Farbe und einer Position in Prozent. Während du bearbeitest, zeigt eine Live-Vorschau das Ergebnis, und die passende CSS-background-Regel aktualisiert sich sofort, sodass du sie direkt in ein Stylesheet kopieren kannst. Nutze ihn, um Schaltflächen, Hero-Hintergründe, Karten und Overlays zu gestalten, oder um zu lernen, wie die Funktionen linear-gradient(), radial-gradient() und conic-gradient() arbeiten.

So verwendest du CSS-Verlaufsgenerator

1. Wähle den Verlaufstyp: Linear, Radial oder Konisch.
2. Stelle bei einem linearen oder konischen Verlauf den Winkel in Grad ein (0-360); der radiale Verlauf nutzt einen zentrierten Kreis und ignoriert den Winkel.
3. Bearbeite jeden Farbstopp: Gib eine HEX-Farbe ein oder wähle sie aus und lege ihre Position als Prozentwert fest (0-100).
4. Klicke auf Stopp hinzufügen, um eine weitere Farbe einzufügen, oder auf das Papierkorbsymbol, um einen Stopp zu entfernen (mindestens zwei Stopps bleiben erhalten).
5. Beobachte, wie sich die Live-Vorschau aktualisiert, und kopiere dann die erzeugte CSS-background-Regel mit der Kopierschaltfläche.

Beispiele

Linear, 90deg, #4f86f7 bei 0% und #9333ea bei 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, Stopps #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Häufig gestellte Fragen

Welche Verlaufstypen werden unterstützt?

Drei: linear-gradient (mit einem Winkel in Grad), radial-gradient (ein zentrierter Kreis) und conic-gradient (mit einem Startwinkel). Wechsle mit dem Typ-Umschalter zwischen ihnen, und das CSS aktualisiert sich sofort.

Wie funktionieren Farbstopps und Positionen?

Jeder Stopp hat eine Farbe und eine Position in Prozent von 0 bis 100. Die Stopps werden in der Reihenfolge ins CSS geschrieben, in der sie in der Liste erscheinen, genau wie der Browser sie interpretiert, sodass du die Reihenfolge direkt steuerst. Du kannst Stopps mit Stopp hinzufügen ergänzen und bis auf mindestens zwei entfernen.

Kann ich Farben visuell auswählen, statt HEX einzugeben?

Ja. Klicke auf das kleine Farbfeld neben jedem Stopp, um die native Farbauswahl deines Browsers zu öffnen, oder gib einen HEX-Wert wie #4f86f7 direkt in das Farbfeld ein. Vorschau und CSS aktualisieren sich, sobald du etwas änderst.

Warum verschwindet das Winkelfeld bei radialen Verläufen?

Ein radialer Verlauf wird hier als zentrierter Kreis gezeichnet, der keinen Winkel verwendet, daher wird das Winkelfeld nur bei linearen und konischen Typen angezeigt, bei denen es die Richtung ändert.

Werden meine Farben oder mein CSS irgendwohin hochgeladen?

Nein. Der Verlauf wird vollständig in deinem Browser mit lokaler Zeichenketten- und Farbberechnung erstellt – weder Farben, CSS noch Einstellungen werden je an einen Server gesendet, sodass es offline funktioniert und deine Arbeit privat bleibt.