Farb-Tools

CSS-Gradient-Generator: Linear, radial, konisch – kostenlos

Kostenlos, ohne Anmeldung, läuft in deinem Browser. Gestalte einen linearen, radialen oder konischen Farbverlauf mit bis zu 8 Farbstopps, sieh ihn live und kopiere das CSS. Lade ihn als PNG-Hintergrund in gängigen Größen herunter.

Typ

Farbstopps

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Die erste Zeile ist eine Vollfarbe für sehr alte Geräte, die keine Verläufe anzeigen können.

Mit einer Vorlage starten

Auf deinem Gerät erstellt.

Warum CSS-Verlaufsgenerator nutzen

100 % kostenlos
Nutze es so oft du willst. Ohne Anmeldung, ohne Wasserzeichen, ohne Installation.
Privat von Grund auf
Was du eingibst, bleibt in deinem Browser und wird nie an uns gesendet.
Läuft auf jedem Gerät
Läuft in deinem Browser unter Windows, Mac, Linux, Android und auf dem iPhone. Keine App nötig.

So nutzt du CSS-Verlaufsgenerator

  1. Wähle linear, radial oder konisch und lege die Richtung fest.
  2. Wähle Farben und zieh jeden Stopp an seine Position.
  3. Kopiere das CSS oder lade den Verlauf als Bild herunter.

Häufige Fragen

Wie verwende ich das CSS?
Füge es in die Regel für das Element ein, das du einfärben möchtest. Die erste Zeile ist eine einfarbige Fallback-Farbe, die zweite der Verlauf.
Was ist der Unterschied zwischen linear, radial und konisch?
Linear verläuft entlang einer geraden Linie, radial breitet sich von der Mitte aus, und konisch dreht sich wie ein Farbkreis um die Mitte.
Kann ich Transparenz verwenden?
Ja. Gib eine Farbe wie rgba(47, 91, 255, 0.5) in einen Stopp ein.
Wird etwas hochgeladen?
Nein. Verläufe werden auf deinem Gerät erstellt.
Ist CSS-Verlaufsgenerator kostenlos?
Ja. Die Nutzung ist kostenlos, ohne Anmeldung und ohne Installation.