Browse categories

CSS-Gradientengenerator

Erstellen Sie browsersichere CSS-Verläufe direkt im Browser.

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

Wie man dies verwendet generator

  1. Wählen Sie den linearen oder radialen Modus, wenden Sie eine Voreinstellung an oder bearbeiten Sie jeden Farbstopp und passen Sie anschließend gegebenenfalls Position und Winkel an.
  2. Live-Ergebnis prüfen und Ergebnis kopieren, wenn es geteilt werden muss.

Wie die generator works

Die Live-Vorschau und die Stopp-Steuerelemente erzeugen eine standardmäßige CSS-Hintergrunddeklaration ohne Präfix, die kopiert oder heruntergeladen werden kann.

Schritt-für-Schritt-Anleitung generation

  1. Wählen Sie den linearen oder radialen Modus, wenden Sie eine Voreinstellung an oder bearbeiten Sie jeden Farbstopp und passen Sie anschließend gegebenenfalls Position und Winkel an.
  2. Die Live-Vorschau und die Stopp-Steuerelemente erzeugen eine standardmäßige CSS-Hintergrunddeklaration ohne Präfix, die kopiert oder heruntergeladen werden kann.
  3. Überprüfen Sie das angezeigte Ergebnis und kopieren Sie es bei Bedarf.

Beispielrechnung

Ein linearer Farbverlauf mit einem Winkel von 135 Grad kann mehrere positionierte Farbstopps überblenden, z. B. Blau bei 0 %, Grün bei 50 % und Gelb bei 100 %.

Risikohinweise

Häufig gestellte Fragen.

Sendet dieses Tool meine Eingaben irgendwohin?

Nein. Die interaktive Berechnung läuft in Ihrem Browser. Diese Website übermittelt keine Eingaben an einen Server.

Wie soll ich das Ergebnis verwenden?

Prüfen Sie, ob die eingegebenen Einheiten und Werte Ihren Gegebenheiten entsprechen, insbesondere im Hinblick auf Datumsangaben, Pausen und Rundungen.

Zugehörige Tools