Kostenloser CSS Gradient Generator
Dieser kostenlose CSS Gradient Generator erstellt einen linearen oder radialen Farbverlauf aus zwei oder drei Farben und einem Winkel, zeigt eine Vorschau und liefert das CSS zum Kopieren, einschließlich einer Fallback-Farbe für alte Browser. Er eignet sich für Designer und Entwickler, die einen Hintergrund für einen Hero-Bereich, einen Button oder eine Karte benötigen, ohne die Syntax von Hand zu schreiben.
CSS Gradient Generator
Generators and Converters
Über dieses Tool
Ein CSS-Farbverlauf ist ein Hintergrundbild, das der Browser zeichnet, daher kostet es keinen Download und bleibt in jeder Größe scharf. Die Syntax ist kurz, aber leicht zu vergessen: linear-gradient nimmt einen Winkel und eine Liste von Farben, und radial-gradient verteilt Farben von einem Mittelpunkt nach außen.
Wählen Sie den Stil, stellen Sie den Winkel für einen linearen Farbverlauf ein und wählen Sie zwei Farben. Aktivieren Sie die dritte Farbe für einen Drei-Punkt-Verlauf; die Punkte werden gleichmäßig verteilt. Die Seite zeichnet eine Vorschau aus denselben Werten und gibt eine background-Regel mit einer einfachen Farbe zuerst aus, damit Browser, die keine Farbverläufe zeichnen können, immer noch etwas Sinnvolles anzeigen. Winkel folgen der CSS-Regel: 0 Grad zeigt nach oben, 90 nach rechts, 180 nach unten.
Achten Sie auf den Kontrast, wenn Text auf einem Farbverlauf liegt: Überprüfen Sie die hellsten und dunkelsten Stellen gegen Ihre Textfarbe mit der Farbauswahl. Farbverläufe mit sehr unterschiedlichen Farbtönen können in der Mitte trüb aussehen, daher versuchen Sie eine dritte Farbe, die dazwischen liegt. Nichts, was Sie wählen, wird gespeichert.
Häufig gestellte Fragen
Was bedeutet der Winkel bei einem linearen Farbverlauf?
Es ist die Richtung der Farbänderung. Null Grad zeigt nach oben, 90 Grad nach rechts, 180 Grad nach unten und 270 Grad nach links. Eine Diagonale wie 135 Grad verläuft von oben links nach unten rechts.
Warum enthält das CSS zuerst eine einfache Farbe?
Es ist ein Fallback. Ein Browser, der keine Farbverläufe zeichnen kann, ignoriert die Verlaufslinie und verwendet die einfache Farbe darüber, sodass der Hintergrund nie leer ist. Alle aktuellen Browser unterstützen Farbverläufe, daher deckt dies nur sehr alte ab.
Was ist der Unterschied zwischen linear und radial?
Ein linearer Farbverlauf ändert die Farbe entlang einer geraden Linie in dem von Ihnen gewählten Winkel. Ein radialer Farbverlauf beginnt in der Mitte und ändert die Farbe nach außen in einem Kreis oder einer Ellipse, was sich für Spotlights, Buttons und sanfte Glows eignet.
Kann ich mehr als drei Farben verwenden?
Dieses Tool erstellt zwei oder drei Punkte, was die meisten Designs abdeckt. Für mehr kopieren Sie das CSS und fügen zusätzliche Farbpunkte von Hand hinzu, getrennt durch Kommas, optional mit einer Position wie #ff0000 40%.