CSS-Farbverlauf-Generator
Gestalten Sie einen Farbverlauf visuell und kopieren Sie CSS, das in jedem modernen Browser funktioniert.
Auf diesem Gerät versiegelt
Läuft in Ihrem Browser. Nichts wird hochgeladen.
Versiegelt
Vorschau
Farbstopps
Ziehen Sie die Stopps, oder wählen Sie einen aus und verwenden Sie die Pfeiltasten. Klicken Sie auf die Leiste, um einen Stopp hinzuzufügen.
Einstellungen
OKLCH und OKLab vermeiden die trübe Grauzone in der Mitte mancher Verläufe. Für ältere Browser ist eine Standardversion enthalten.
CSS-Code
So funktioniert es
-
Typ wählen
Wählen Sie einen linearen, radialen oder konischen Verlauf oder beginnen Sie mit einer Vorlage, und legen Sie Winkel oder Mittelpunkt fest.
-
Farben bearbeiten
Ziehen Sie die Farbstopps entlang der Leiste, klicken Sie auf die Leiste, um weitere hinzuzufügen, und ändern Sie Farbe und Position jedes Stopps.
-
CSS kopieren
Kopieren Sie den erzeugten Code und fügen Sie ihn als Hintergrund in Ihr Stylesheet ein.
Häufige Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf ändert die Farbe entlang einer geraden Linie im gewählten Winkel. Ein radialer Verlauf breitet sich von einem Mittelpunkt als Kreis oder Ellipse aus. Ein konischer Verlauf dreht sich wie Uhrzeiger um einen Mittelpunkt, praktisch für Farbkreise und Tortendiagramme.
Funktioniert das erzeugte CSS in allen Browsern?
Lineare, radiale und konische Verläufe funktionieren in allen aktuellen Browsern. Wenn Sie die Mischung OKLCH oder OKLab wählen, enthält der Code zuerst eine Standardzeile, damit ältere Browser trotzdem einen Verlauf zeigen.
Warum wirkt mein Verlauf in der Mitte grau?
Mischt man zwei sehr unterschiedliche Farben im Standard-Farbraum sRGB, entsteht oft ein schlammiges Grau. Stellen Sie die Mischung auf OKLCH oder OKLab um: Die Farben werden so gemischt, wie das Auge sie wahrnimmt, und die Mitte bleibt leuchtend.
Kann ich transparente Farben verwenden?
Ja. Geben Sie im Farbfeld eines Stopps eine Farbe mit Transparenz ein, etwa rgb(52 66 217 / 0.4) oder #3442d966. Das eignet sich gut für Überlagerungen auf Bildern.
Wie viele Farbstopps kann ich hinzufügen?
So viele Sie brauchen. Jeder Stopp lässt sich mit der Maus, per Touch oder mit den Pfeiltasten verschieben und entfernen, solange zwei Stopps übrig bleiben.