CSS-Farbverlauf-Generator (Ebenen, Wiederholung)

Erstellt einen Hintergrund aus bis zu vier übereinanderliegenden linearen, radialen oder konischen Farbverläufen und liefert das fertige background-image-CSS. Halbtransparente Ebenen ergeben Licht- oder Mesh-Effekte, die Wiederholung erzeugt Streifen und Ringe, und das Bild lässt sich als PNG speichern.

So geht’s

1. Beginnen Sie mit einer Kachel unter „Vorlagen“ oder mit der Standardeinstellung. Wählen Sie unter „Ebenen“ die Ebene, die Sie bearbeiten möchten, und legen Sie „Typ“, „Winkel“ und „Wiederholend“ fest.
2. Bei radialen und konischen Ebenen klicken oder ziehen Sie in der Vorschau, um den Mittelpunkt zu verschieben, und wählen „Form“ und „Größe“.
3. Klicken Sie auf den Balken „Farbstopps“, um einen Stopp hinzuzufügen, und ziehen Sie einen Kreis, um ihn zu verschieben. Darunter passen Sie Farbe, „Deckkraft“, „Position“ und „Übergangspunkt“ des ausgewählten Stopps an.
4. Drücken Sie „Ebene hinzufügen“, um eine halbtransparente Ebene darüberzulegen; ordnen Sie die Ebenen neu oder wählen Sie „Ausblenden“, um Varianten zu vergleichen.
5. Drücken Sie „Kopieren“ neben dem CSS, oder wählen Sie eine „PNG-Größe“ und drücken Sie „Als PNG speichern“.

So wird gerechnet

• Die Ausgabe ist eine einzelne background-image-Deklaration; die Ebenen werden in CSS-Reihenfolge von oben nach unten gezeichnet. Halbtransparente Farben werden als rgb(r g b / a) geschrieben.
• Der Übergangspunkt ist der CSS-Transition-Hint, der die Stelle verschiebt, an der sich zwei Stopps zur Hälfte mischen. Die Wiederholung kachelt den Abschnitt vom ersten bis zum letzten Stopp, wie bei repeating-linear-gradient.
• Winkel und die Größen-Schlüsselwörter radialer Verläufe folgen CSS Images 3, und die Farben werden wie in Browsern standardmäßig in sRGB gemischt. Das PNG wird im Browser nach denselben Regeln gezeichnet.
• Ihre Ebenen und Stopps bleiben in diesem Browser gespeichert.

Häufige Fragen

Wie staple ich mehrere Farbverläufe in CSS?

Führen Sie sie in background-image durch Kommas getrennt auf. Der erste wird oben gezeichnet, daher brauchen die oberen Ebenen etwas Transparenz. Das CSS-Feld schreibt genau diese Form.

Wie erstelle ich einen gestreiften Hintergrund?

Schalten Sie „Wiederholend“ ein und setzen Sie zwei Stopps derselben Farbe auf dieselbe Position, um eine scharfe Kante zu erhalten. Die Vorlage „Streifen“ ist ein schneller Einstieg.

Die Mitte meines Farbverlaufs wirkt schmutzig. Was kann ich tun?

Schalten Sie „Übergangspunkt“ ein, um den Mischpunkt zu verschieben, oder fügen Sie in der Mitte einen Stopp mit der gewünschten Farbe hinzu. Komplementärfarben ergeben gemischt ein Grau.

Können sich Vorschau und PNG unterscheiden?

Die Vorschau zeichnet der Browser aus dem CSS; das PNG wird nach denselben Regeln berechnet. Abgesehen von Rundungen stimmen beide überein.