CSS Gradient Generator

Richtung & Winkel (die häufigste Stolperfalle)

Lineare Gradients laufen entlang einer Achse. Du kannst die Richtung entweder mit Keywords (to right, to bottom) oder mit Winkeln angeben.

Merke dir:
to top = 0deg, to right = 90deg, to bottom = 180deg,
to left = 270deg – und Winkel drehen im Uhrzeigersinn.

.demo--1{
  background-image: linear-gradient(to right, #7c3aed, #06b6d4);
}
.demo--1b{
  background-image: linear-gradient(135deg, #fb7185, #a78bfa, #38bdf8);
}

Farbstopps gezielt setzen (mehr „Design“, weniger Zufall)

Ohne Prozentangaben verteilt der Browser die Farben gleichmäßig. Mit Stopps steuerst du, wo eine Farbe dominiert und wo
der Übergang passiert.

.demo--2{
  background-image: linear-gradient(
    90deg,
    #111827 0%,
    #111827 20%,
    #7c3aed 55%,
    #06b6d4 100%
  );
}

Harte Kanten (für „Color Blocks“, Trennflächen, UI-Chips)

Du willst keine weiche Mischung, sondern eine knackige Kante? Dann gib derselben Farbe zwei Positionen
(Multi-Position-Stops).

.demo--3{
  background-image: linear-gradient(
    90deg,
    #22c55e 0 50%,
    #0ea5e9 50% 100%
  );
}

Transparenz als Overlay (perfekt auf Fotos)

Gradients sind ideal, um Bilder „lesbar“ zu machen – z. B. mit einem dunklen Verlauf von unten.

.demo--4{
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 0.70), rgb(0 0 0 / 0)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
}

Mehrere Hintergründe werden gestapelt: Der erste Eintrag liegt oben, der letzte unten.