Zum Inhalt springen
helpyself

CSS-Verlauf-Generator

Local only — nothing is uploaded unless you save or share it.

Ein CSS-Verlauf-Generator für linear, radial und konisch — den Code direkt mitnehmen.

  1. Wählen Sie die Art des Verlaufs, und den Winkel, falls er einen hat
  2. Stellen Sie Ihre Farben ein — mehr Stopps hinzufügen oder von Hand positionieren
  3. Kopieren Sie das CSS
180°
Tool speichern

CSS-Verlauf-Generator griffbereit halten

Als Lesezeichen

Über dieses Tool

Ein Verlauf gehört zu den Dingen, die sich schneller nach Augenmaß bauen als von Hand schreiben lassen, denn die Zahl, die Sie wollen, ist selten die, die Sie zuerst raten. Hier sehen Sie das Ergebnis, während Sie es ändern, und bekommen das CSS darunter gereicht. Alle drei Arten sind da: linear für das übliche Verblassen von links nach rechts oder oben nach unten, radial für ein Leuchten, das sich aus der Mitte ausbreitet, und konisch für den Schwenk um einen Punkt, aus dem Farbkreise und Tortendiagramme gemacht sind. Sie können beliebig viele Farbstopps hinzufügen und jeden positionieren, oder die Positionen leer lassen und den Browser sie gleichmäßig verteilen lassen — was Sie fast immer wollen und den Wert kurz genug hält, um ihn später zu bearbeiten. Der Wiederholmodus macht aus jedem davon ein kachelndes Muster, und so entstehen Streifen in CSS ohne ein einziges Bild. Jede Farbe, die Sie tippen, wird eingelesen und neu geschrieben statt durchgereicht, der Wert auf Ihrer Zwischenablage ist also eine Farbe und sonst nichts. Das Werkzeug läuft vollständig in Ihrem Browser.

Häufige Fragen

Was ist der Unterschied zwischen linear, radial und konisch?

Linear verblasst entlang einer geraden Linie, das ist der, den die meisten meinen. Radial breitet sich von einem Punkt nach außen aus wie ein Leuchten. Konisch schwenkt um einen Punkt herum statt von ihm weg, und genau das macht Farbkreise und Tortenstücke in reinem CSS möglich.

Soll ich die Positionen der Stopps setzen?

Meist nicht. Leer gelassen verteilt der Browser die Stopps gleichmäßig, was in den allermeisten Fällen das Richtige ist und das CSS kurz und später leicht bearbeitbar hält. Setzen Sie sie von Hand, wenn eine Farbe länger stehen soll oder wenn Sie eine harte Kante zwischen zweien wollen.

Wie mache ich einen harten Streifen statt eines Verlaufs?

Geben Sie zwei Stopps dieselbe Position. Ein Verlauf von einer Farbe bei 50 Prozent zu einer anderen ebenfalls bei 50 Prozent wechselt schlagartig statt zu mischen. Kombinieren Sie das mit dem Wiederholmodus, und Sie haben Streifen ganz ohne Bilddatei.

Warum kam meine Farbe als HEX-Code zurück?

Jede Farbe wird eingelesen und neu geschrieben statt unverändert durchgereicht. Das hält die Ausgabe auf einer gültigen Farbe und sonst nichts, was zählt, weil der Wert in einem Stylesheet landet. Eine Farbe, die nicht verstanden werden kann, wird abgelehnt statt stillschweigend übernommen.

Funktionieren Verläufe in jedem Browser?

Linear und radial funktionieren seit vielen Jahren überall. Konisch ist neuer, wird aber von allen aktuellen Browsern unterstützt. Wenn Sie etwas sehr Altes bedienen müssen, zeigt der Generator auch eine flache Farbe, die Sie vorher als Rückfall setzen können.

Helfen Sie, dieses Tool zu verbessern

Einen Fehler gefunden, eine Änderung im Kopf, oder fehlt Ihnen ein Tool?

/gradient-generator

↑↓ bewegen · Enter öffnen · Esc schließen