Lineare, radiale oder konische CSS-Verläufe mit Live-Vorschau erstellen. Farben und Richtung anpassen, dann CSS kopieren.
Wählen Sie einen Verlaufstyp (linear, radial oder konisch), fügen Sie Farbstopps hinzu, passen Sie deren Positionen an und sehen Sie das Ergebnis live. Das generierte CSS ist bereit zum direkten Einfügen in Ihr Projekt.
Wählen Sie den Verlaufstyp, passen Sie den Winkel an, klicken Sie auf Farbfelder und ziehen Sie Regler. Klicken Sie auf + Farbe hinzufügen für weitere Stopps. Kopieren Sie das CSS aus dem dunklen Codeblock rechts.
Verläufe sind dann wertvoll, wenn sie Atmosphäre, Tiefe oder Betonung erzeugen, ohne gleich ein vollständiges Bildasset zu brauchen. Der praktische Nutzen eines Generators liegt in der Geschwindigkeit: Sie können Richtung, Stopppositionen und Verlaufstypen schnell genug vergleichen, um Designentscheidungen zu treffen, solange die Idee noch frisch ist.
Dieses Tool hält diese Exploration visuell und liefert CSS, das Sie weiterverwenden können, sobald die Gestaltung stimmt.
Verläufe können Tiefe und Bewegung hinzufügen, ohne das Gewicht eines Bildes. Auf großen Flächen werden aber schlechte Stopppositionen und schmutzige Übergänge auch sofort sichtbar.
Buttons, Banner und hervorgehobene Flächen profitieren oft von subtilen Verläufen, können aber auch schnell altmodisch wirken, wenn der Übergang zu aggressiv ist.
Freigegebene Markenfarben in einem Verlauf zu verwenden klingt einfach, bis die Mischung in der Mitte plötzlich nicht mehr nach Marke aussieht.
Die meisten Verläufe werden besser, wenn sie einfach beginnen. Mehr Stops bedeuten nicht automatisch mehr Raffinesse.
Winkel und Prozentwerte für Stops lassen sich abstrakt schwer beurteilen. Erst die Live-Vorschau macht daraus eine Designentscheidung.
Ein Verlauf kann für sich gut aussehen und trotzdem schlecht funktionieren, sobald Text, Icons oder Karten darauf liegen.
Hier spielen Verläufe oft ihre Stärke aus: Sie geben einer Seite Atmosphäre, ohne ein schweres Bild-Asset zu brauchen.
Wenn mehrere Komponenten dieselbe visuelle Sprache teilen sollen, ist ein exakt kopierter CSS-Verlauf sauberer, als ihn mehrfach von Hand anzunähern.
Diese Typen können stark wirken, sind aber auch leicht zu überziehen. Ein Generator hilft, das schnell herauszufinden.
Dieses Tool erzeugt CSS-Verläufe. Es entscheidet keine zugänglichen Vordergrundfarben, baut kein vollständiges Farbsystem und sagt nicht, ob der Effekt in Ihr Layout passt. Es liefert einen brauchbaren Verlauf, nicht das gesamte Designurteil.
Verläufe sind leicht hinzuzufügen und überraschend leicht zu verfehlen. Der Wert eines Generators liegt nicht nur in Geschwindigkeit, sondern darin, unnötige Iterationen durch vermeidbare Syntaxfummelei zu reduzieren.
Ein konischer Verlauf dreht Farben um einen Mittelpunkt. Nützlich für Tortendiagramme, Farbräder und Zifferblatteffekte – überall dort, wo Farbe kreisförmig statt linear verläuft.
So viele Sie möchten – klicken Sie auf + Farbe hinzufügen für weitere Stopps. Das CSS ist unabhängig von der Anzahl der Stopps gültig.
Dieses Werkzeug läuft vollständig in Ihrem Browser. Nichts, was Sie eingeben oder einfügen, wird an einen Server gesendet — die gesamte Verarbeitung erfolgt lokal auf Ihrem Gerät.