Generate linear and radial CSS gradient code online with multi-stop color control, angle adjustment, shape and position settings, real-time preview and one-click copy. An essential tool for frontend developers.
Ein CSS-Verlauf ist ein Effekt, der einen sanften Farbuebergang auf dem Hintergrund eines Elements erstellt, ohne Bilder zu verwenden, und reichhaltige visuelle Tiefe ermoeglicht. CSS unterstuetzt zwei Verlaufstypen: lineare Verlaeufe (linear-gradient) uebergehen Farben entlang einer geraden Linie, waehrend radiale Verlaeufe (radial-gradient) Farben von einem Mittelpunkt aus nach aussen ausstrahlen. Verlaeufe sind ein CSS-Bildtyp und koennen in Eigenschaften wie background, border-image und list-style-image verwendet werden.
In CSS verwendet linear-gradient(Winkel, ...) die Richtung nach oben als 0deg, im Uhrzeigersinn ansteigend. 90deg bedeutet von links nach rechts, 180deg von oben nach unten und 270deg von rechts nach links. 0deg ist gleichbedeutend mit to top. Sie koennen auch Schluesselwoerter wie to right bottom anstelle von Winkelwerten verwenden.
Die Syntax fuer radiale Verlaeufe ist radial-gradient(Form Groesse at Position, ...). Die Form kann Kreis oder Ellipse sein (Standard). Position steuert die Mittelpunktposition, wie center, top left, 50% 50% usw. Groessenoptionen umfassen closest-side, farthest-corner und mehr. Das Anpassen von Form und Position kann Scheinwerfer-, Glueh- und andere visuelle Effekte erzeugen.
background-clip: text mit Verlaeufen verwenden, um Verlaufstext zu erstellenCSS-Verlaeufe sind Bildhintergruenden weit ueberlegen: Keine Dateigroesse (keine HTTP-Anfragen), unendlich skalierbar ohne Qualitaetsverlust, unterstuetzen Echtzeit-Aenderung und sind mit allen modernen Browsern kompatibel. Verwenden Sie Bilder nur, wenn Sie komplexe Texturen oder Rauscheffekte benoetigen.
0deg verlaeuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Der Winkel repraesentiert die Richtung der Verlaufslinie; Farben wechseln entlang von Linien, die senkrecht zu dieser Richtung stehen. Sie koennen auch Schluesselwoerter wie to top, to right anstelle von Winkelwerten verwenden.
Kreis erzeugt einen perfekt runden Verlauf, der vom Mittelpunkt gleichmaessig ausstrahlt. Ellipse erzeugt einen ovalen Verlauf, der sich nach Breite und Hoehe des Elements streckt. Bei quadratischen Elementen erzeugen beide denselben Effekt; bei rechteckigen Elementen fuellt Ellipse den gesamten Bereich.
Setzen Sie den Verlauf als Hintergrund, fuegen Sie dann background-clip: text und -webkit-background-clip: text hinzu und setzen Sie color auf transparent. Der Verlauf wird nur innerhalb der Textgrenzen angezeigt und erzeugt einen farbigen Verlaufstexteffekt.
Ja. Verwenden Sie RGBA- oder HSLA-Format fuer Farbstopps, wobei der vierte Parameter die Transparenz steuert (0 bis 1). Sie koennen auch 8-stellige Hex-Notation wie #FF000080 verwenden. Das Mischen transparenter Farbstopps in einen Verlauf kann Ein-/Ausblendeffekte erzeugen.