Utilore

CSS-Farbverlauf-Generator

Ziehen Sie an den Reglern und beobachten Sie, wie sich die Fläche darüber mitverändert. Wenn es passt, kopieren Sie die Zeile in Ihr Stylesheet — mehr braucht es nicht.

Der Winkel gilt für lineare und konische Verläufe; der radiale geht von der Mitte aus.

Farbstopps

    So geht es

    1. Typ wählen: linear läuft entlang einer Geraden, radial geht von der Mitte aus, konisch dreht sich darum.
    2. Winkel einstellen und die Stopps dorthin schieben, wo sich die Farben treffen sollen.
    3. Weitere Stopps hinzufügen, wenn zwei Farben nicht reichen, oder «Überrasch mich» drücken.
    4. Die CSS-Zeile unter der Vorschau kopieren.

    Gut zu wissen

    Warum die Vorschau auf einem Schachbrett liegt

    Ein Verlauf endet oft in einer transparenten Farbe, und auf einer schlicht weißen Fläche sieht das genauso aus wie eine deckende. Das Schachbrett scheint überall dort durch, wo die Farbe nicht voll ist — was Sie einstellen, sehen Sie also auch. Genau dafür haben Bildbearbeitungen diese Gewohnheit erfunden.

    Die Stopps werden vor dem Code sortiert

    CSS ordnet Farbstopps nicht selbst: Ein Stopp bei 70 %, der vor einem bei 30 % steht, zwingt den Browser, den zweiten festzuklemmen, und der Verlauf verliert stillschweigend eine Farbe. Das Werkzeug sortiert die Stopps beim Bauen der Zeile nach Position, sodass ein Regler, den man über seinen Nachbarn hinwegzieht, das Ergebnis nie zerstört.

    Häufige Fragen

    Was unterscheidet die drei Typen?

    Ein linearer Verlauf folgt einer Geraden und nimmt einen Winkel: 90deg läuft von links nach rechts, 180deg von oben nach unten. Ein radialer breitet sich in Kreisen von der Mitte aus und passt zu Leuchten und Scheinwerfern. Ein konischer dreht sich wie ein Uhrzeiger um einen Punkt — daraus bestehen Kreisdiagramme und Farbkreise.

    Wie mache ich einen Verlauf mit Transparenz?

    Wählen Sie eine Farbe und senken Sie ihre Deckkraft im Auswahlfeld, falls Ihr Browser Alpha anbietet, oder passen Sie die kopierte Zeile von Hand an: rgba(31, 95, 214, 0) funktioniert als Stopp genau wie eine volle Farbe. Ein Ausblenden nach Transparent nützt mehr als eines nach Weiß — es funktioniert auf jedem Hintergrund.

    Kann ich das als Textfarbe verwenden?

    Ja, mit zwei zusätzlichen Zeilen: den Verlauf auf background-image legen, dann background-clip: text und color: transparent ergänzen. Der Text behält seine Form, und der Verlauf scheint durch die Buchstaben.

    Warum wirkt derselbe Winkel im radialen Modus anders?

    Er wirkt dort gar nicht. Ein radialer Verlauf beginnt in der Mitte und hat keine Richtung; der Winkel bleibt daher dem linearen und dem konischen Modus vorbehalten, wo er festlegt, wo der Verlauf ansetzt.

    Ähnliche Tools