CSS Gradient Generator

Create CSS gradients

Create CSS gradients Läuft lokal in Ihrem Browser

Start colour

End colour

Angle135°

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

About the

Der CSS-Verlaufsgenerator erstellt aus zwei Farben und einem Winkel einen echten linearen oder radialen Verlauf, zeigt ihn in voller Größe an und übergibt Ihnen das CSS. Der Winkel ist der Teil, den die Leute falsch verstehen: In CSS zeigt 0 Grad nach oben und die Richtung dreht sich im Uhrzeigersinn, sodass 90 Grad von links nach rechts und 180 Grad von oben nach unten verlaufen. Wenn man das falsch macht, sieht ein Farbverlauf beim ersten Mal oft verkehrt aus. Beide Farben können einen achtstelligen Alphawert haben, mit dem Sie einen Farbverlauf über einem Heldenbild ausblenden.

Where people use the

Erstellen Sie einen Heldenhintergrund, der zwischen zwei Markenfarben wechselt.
Testen Sie, welcher Blickwinkel richtig aussieht, bevor Sie sich im Code darauf festlegen.
Erzeugen eines subtilen vertikalen Farbverlaufs für eine Karte oder einen Button.
Erstellen einer halbtransparenten Überlagerung, die ein Foto abdunkelt.

How to use the

1
Wählen Sie die Start- und Endfarben
Verwenden Sie den Farbwähler oder geben Sie einen Hexadezimalwert ein. Die Vorschau und das CSS werden aktualisiert, wenn Sie sie ändern.
2
Wählen Sie linear oder radial
Die Linie verläuft in einem gewählten Winkel über die Box. Radial breitet sich von der Mitte als Kreis nach außen aus.
3
Stellen Sie den Winkel ein
Ziehen Sie den Schieberegler von 0 auf 360 Grad. Denken Sie daran: 0-Grad-Punkte nach oben, 90-Grad-Punkte nach rechts, 180-Grad-Punkte nach unten, 270-Grad-Punkte nach links.
4
Kopieren Sie das CSS
Bei der Regel handelt es sich um eine Hintergrunddeklaration, die Sie direkt in ein Stylesheet oder bei Bedarf in eine Hintergrundbildeigenschaft einfügen können.

Tipps und Best Practices

Bevorzugen Sie einen kleinen Helligkeitsunterschied für Hintergründe mit Text; es liest sich eher als Textur denn als Ablenkung.
Überprüfen Sie bei Text über einem Farbverlauf den Kontrast an den hellsten und dunkelsten Punkten, nicht nur am Durchschnitt.
Beschränken Sie die Steigungen auf zwei oder drei Haltestellen; mehr neigt dazu, schlammig auszusehen.

Häufig gestellte Fragen

In welche Richtung zeigt der Winkel?

Null Grad zeigt zur Oberseite des Elements und der Winkel nimmt im Uhrzeigersinn zu. Also gehen 90 Grad nach rechts und 180 Grad nach unten. Dies ist kontraintuitiv, wenn Sie es gewohnt sind, Winkel zu berechnen, die von rechts gegen den Uhrzeigersinn gemessen werden.

Warum sieht mein Farbverlauf gebändert aus?

Denn zwei Farben, die in der Leuchtdichte nahe beieinander liegen, erzeugen auf einem 8-Bit-Display sichtbare Stufen, insbesondere über eine große Fläche. Durch das Hinzufügen einer subtilen dritten Blende oder die Verwendung eines etwas größeren Luminanzbereichs wird dies normalerweise ausgeblendet.

Kann ich Transparenz nutzen?

Ja. Verwenden Sie einen achtstelligen Hexadezimalwert wie 667eea00 für völlige Transparenz oder 667eea80 für halbe Transparenz, und der Farbverlauf wird über alles, was sich dahinter befindet, ausgeblendet.

Wird der Farbverlauf überall unterstützt?

Lineare und radiale Verläufe werden in jedem aktuellen Browser ohne Präfix unterstützt. Herstellerpräfixe werden nur für sehr alte Versionen von Safari und Android benötigt, was in der Praxis bedeutet, dass nichts nach etwa 2015 erstellt wurde.

Warum wird mein Farbverlauf nicht angezeigt?

Weil das Element keine Höhe hat. Ein Farbverlauf wird in die Box des Elements gemalt, sodass ein leeres Div auf die Höhe Null reduziert wird und nichts anzeigt. Legen Sie eine Höhe fest oder fügen Sie Inhalte hinzu.

Erzeugt es mehr als zwei Farbstopps?

Nein, dieses Tool erledigt zwei. Nehmen Sie für einen Farbverlauf mit mehreren Stopps das von ihm erzeugte CSS und fügen Sie Stopps manuell hinzu. Die Syntax besteht einfach aus mehr Farb- und Prozentpaaren, die durch Kommas getrennt sind.