Vier Verlaufstypen
Erstelle lineare, radiale oder konische Hintergründe. Für einen Mehrpunkt-Verlauf werden radiale Farbflächen übereinandergelegt.
Farbverlaufs-Generator
Erstelle einen Farbverlauf, passe Farben und Richtung an und kopiere das CSS. Als Ausgangspunkt stehen 60 Vorlagen bereit.
Modus wählen
Weitere Aktionen
Ähnliche Tools
Deine Statistiken
0
Gewählte Farben
0
Exportierte Paletten
0
Erstellte Verläufe
0
Kontrastprüfungen
Farbwähler
Meistgenutzter Modus
0%
Aktivitätswert
So erstellst du einen CSS-Farbverlauf
Das Video konnte nicht geladen werden. Du kannst weiterhin der Anleitung unten folgen.
Das Video zeigt die englische Oberfläche.
Linear mischt Farben entlang einer Geraden, Radial von einer Mitte aus und Konisch um eine Mitte herum. Wähle Mehrpunkt für mehrere Farbbereiche. Mit einer Schnellvorlage startest du mit vorbereiteten Farben.
Einen Hintergrund mit CSS-Farbverlauf erstellen
60 Ausgangsvorlagen
Suche eine Vorlage in der Bibliothek und wende sie an. Passe anschließend Farben und Positionen an deinen Entwurf an.
Farbstopps und Farbpunkte
Lineare, radiale und konische Verläufe erlauben bis zu sechs Farbstopps. Mehrpunkt-Verläufe unterstützen bis zu zehn Farbpunkte.
3 weitere anzeigenWeniger anzeigen
CSS- und SCSS-Code
Kopiere einen CSS-Hintergrund oder eine SCSS-Variable. Prüfe das Ergebnis in deinem Stylesheet, wenn du Richtung oder Positionen geändert hast.
Grenzen der Exportformate
Tailwind vereinfacht den Verlauf zu einem linearen. SVG verwendet für konische und Mehrpunkt-Entwürfe einen linearen Ersatz. Diese Formate stimmen daher nicht immer mit der Vorschau überein.
Weitere Farbwerkzeuge
Die Modusauswahl öffnet eigene Seiten für Farbauswahl, Farben aus Bildern, Paletten und Kontrastprüfung.
Häufige Fragen
Wie erstelle ich einen CSS-Farbverlauf?
Wähle einen Typ oder eine Vorlage, bearbeite Farben und Positionen und kopiere den CSS-Hintergrund. Füge ihn in dein Stylesheet ein und prüfe ihn im Browser, in dem dein Entwurf später laufen soll.
Welche Verlaufstypen kann ich erstellen?
Lineare, radiale, konische und Mehrpunkt-Verläufe. Mehrpunkt-Verläufe bestehen aus radialen Ebenen über einer Grundfarbe, nicht aus einer eigenen CSS-Verlaufsfunktion.
Kann ich konische oder Mesh-Verläufe erstellen?
Ja. Konische Verläufe ordnen Farben um einen Mittelpunkt an. Mehrpunkt-Verläufe schichten radiale Farbflächen zu einem Hintergrund mit Mesh-Effekt. Nutze CSS, um diese Typen beizubehalten.
Wie viele Farbstopps oder Punkte sind möglich?
Lineare, radiale und konische Verläufe erlauben bis zu sechs Farbstopps. Mehrpunkt-Verläufe erlauben bis zu zehn Punkte. Farbe und Position lassen sich jeweils ändern.
4 weitere anzeigenWeniger anzeigen
Entspricht jeder Export der Vorschau?
Tailwind vereinfacht den Entwurf zu einem linearen Verlauf. SVG ersetzt konische und Mehrpunkt-Verläufe durch lineare. PNG und JPG haben 1200 × 600 Pixel, daher können ihre Proportionen und Farbmischungen von der CSS-Vorschau abweichen. Nutze CSS, um den gewählten Verlaufstyp beizubehalten.
Gibt es fertige Vorlagen?
Ja. Über Bibliothek öffnen erreichst du 60 durchsuchbare Vorlagen aus allen vier Typen. Wähle eine als Ausgangspunkt und bearbeite sie weiter.
Ist der Verlaufsgenerator kostenlos?
Ja, MORELESS stellt ihn ohne Konto bereit. Berechnungen und Codeerzeugung laufen im Browser.
Wie öffne ich die anderen Farbwerkzeuge?
Nutze die Modusauswahl oberhalb der Verlaufseinstellungen. Sie öffnet eigene Seiten für Farbauswahl, Farben aus Bildern, Paletten und Kontrastprüfung.
Technische Details
CSS-Hintergründe
Das CSS nutzt linear-gradient(), radial-gradient() oder conic-gradient() mit Farben und Positionen. Die CSS-Engine des Browsers zeichnet die Vorschau. Prüfe den kopierten Code in deinem Stylesheet.
Mehrpunkt-Farbmischungen
Ein Mehrpunkt-Verlauf schichtet radial-gradient()-Funktionen über einer Grundfarbe. Jeder Punkt hat eine Farbe und eine zweidimensionale Position. Eine CSS-Funktion multipoint-gradient() gibt es nicht.
2 weitere anzeigenWeniger anzeigen
Grenzen des Codeexports
SCSS speichert den Verlauf in einer Variablen. Tailwind nutzt eine vereinfachte lineare Richtung und nur einen Teil der Farben. SVG unterstützt lineare und radiale Verläufe und ersetzt konische sowie Mehrpunkt-Verläufe durch lineare.
Grenzen des Bildexports
PNG und JPG werden per Canvas mit 1200 × 600 Pixeln gerendert, mit den aktuellen Farben und den verfügbaren Winkel-, Mittelpunkt- oder Punktpositionen. Das feste Seitenverhältnis und die Farbmischung können von der CSS-Vorschau abweichen. Konische Bilder benötigen Canvas-Unterstützung für konische Verläufe.