CSS Verlauf Generator: Stopp für Stopp zum fertigen Verlauf
- Wähle oben Linear, Radial oder Konisch. Linear fragt nach einem Winkel von 0 bis 360 Grad. Radial fragt nach Kreis oder Ellipse und dem Mittelpunkt. Konisch fragt nach Startwinkel und Mittelpunkt.
- Bearbeite die Farbstopps. Jeder Stopp hat eine Farbauswahl, ein Hex-Feld, eine Position in Prozent und einen Alpha-Wert von 0 bis 100.
- Mit den Pfeilen verschiebst du einen Stopp in der Liste, mit dem Kreuz löschst du ihn, mit Stopp hinzufügen kommt ein neuer ans Ende.
- Kopiere mit Kopieren die Regel, die du brauchst.
Der CSS Verlauf Generator öffnet sich mit einem fertigen Dreifarbverlauf. Du musst nichts leeren, nur ändern. Die Vorschau rechts ruht auf einem Schachbrettmuster, damit halbtransparente Stellen sichtbar bleiben.
Vorlagen, Umkehren und gleichmäßiges Verteilen
Sechs Vorlagen füllen den ganzen Editor, darunter ein Farbkreis als konischer Verlauf und ein Streifenmuster. Reihenfolge umkehren dreht die Liste um und spiegelt jede Position, aus 30 % wird 70 %. Gleichmäßig verteilen setzt die Stopps auf 0, 100 geteilt durch (Anzahl minus 1) und so weiter bis 100. Bei drei Stopps sind das 0, 50 und 100.
Warum zwei gleiche Positionen eine harte Kante ergeben
Liegen zwei Stopps auf derselben Position, gibt es dort keinen Übergang, sondern einen Sprung. Die Streifen-Vorlage nutzt das: Bänder von je 10 %, die sich wiederholen, weil die Option „Wiederholender Verlauf“ an ist und der letzte Stopp bei 20 % steht. Diese letzte Position ist die Länge einer Wiederholung.
Das Werkzeug sortiert nie. Steht ein Stopp vor einem früheren, setzt der Browser ihn auf die Position des früheren. Positionen sind auf 0 bis 100 begrenzt.
Was im Code landet
Das erste Feld enthält eine Zeile background: ...;. Das zweite enthält zwei Zeilen: background-color mit der Farbe des ersten Stopps als Fallback und darunter background-image. Deckende Farben stehen als #rrggbb im Code. Ab Alpha unter 100 wird daraus rgb(0 0 255 / 50%). Radial und konisch schreiben den Mittelpunkt als at 50% 50%, eine Größenangabe fehlt, es gilt also farthest-corner.
Grenzen und Datenschutz in einem Absatz
Farben gibt es nur als Hex (#rgb oder #rrggbb), keine Namen, kein hsl(). Es gibt eine Verlaufsebene, keine Farbmitte zwischen Stopps und keine eigene Radialgröße. Ein Verlauf hat 2 bis 8 Stopps. Nichts davon verlässt den Browser: Beim Bearbeiten und Kopieren geht keine Anfrage hinaus, nichts wird gespeichert, und ein Neuladen stellt den Startverlauf wieder her. Kopieren schreibt in die Zwischenablage, einen Download gibt es nicht.
Häufig gestellte Fragen (FAQ)
rgb(r g b / 50%). Die Vorschau liegt auf einem Schachbrett, damit du die Transparenz siehst.