Linear, radial oder konisch — unbegrenzte Farbstopps, Live-Vorschau, sofortiges CSS.
Dieser kostenlose CSS-Gradient-Generator lässt dich lineare, radiale und konische Gradients mit unbegrenzten Color Stops gestalten, den Winkel visuell tunen, den Repeating-Modus umschalten und produktionsreifes CSS kopieren — alles läuft in deinem Browser.
Wähle einen Gradient-Typ (linear, radial oder konisch), füge so viele Color Stops hinzu wie du brauchst, ziehe sie entlang der Leiste, um Positionen zu setzen, und kopiere dann das generierte CSS. Die Vorschau aktualisiert live, der Code ist einen Klick entfernt.
Wähle den Gradient-Typ aus dem segmentierten Steuerelement. Für linear: ziehe das Winkel-Dial; für radial: wähle Form und Position; für konisch: setze den From-Angle. Tune jeden Color Stop in der Leiste darunter, füge neue mit dem Plus-Button hinzu und kopiere das CSS, wenn du zufrieden bist.
Linear mischt entlang einer geraden Linie in einem Winkel, radial breitet sich von einem Mittelpunkt nach außen in einem Kreis oder einer Ellipse aus, und konisch streift Farben um einen Mittelpunkt wie ein Tortendiagramm.
Jeder Stop hat eine Farbe und eine optionale Positions-Prozentangabe. Der Browser interpoliert zwischen aufeinanderfolgenden Stops. Zwei benachbarte Stops an derselben Position erzeugen eine harte Linie — so baust du Streifen oder geteilte Hintergründe.
Aktiviere den Repeating-Modus für Streifen, Scan-Linien oder Sonnenstrahlen. Der Browser kachelt denselben Gradient unendlich; zwei Stops bei 0% und 10% füllen die Box mit einem 10% breiten wiederholten Muster.
Vom Tooljar-Team gemäß den W3C-Spezifikationen CSS Images Module Level 3 und Level 4 entwickelt, mit derselben Gradient-Syntax, die der Browser parst, sodass die Vorschau exakt das ist, was Produktions-CSS malen wird.