CSS Gradient Builder
Understand CSS Gradient Builder
Baut lineare, radiale und konische CSS-Farbverläufe aus Farbstopps, mit Live-Vorschau und einer kopierbaren background-Deklaration.
How it works
Ein Verlauf wird entlang einer Linie (linear), von einem Mittelpunkt nach außen (radial) oder um einen Mittelpunkt herum (konisch) gezeichnet, wobei jeder Farbstopp an einen Prozentwert entlang dieses Wegs geheftet und zwischen den Stopps interpoliert wird. CSS-Winkel für lineare Verläufe werden im Uhrzeigersinn ab „to top“ gemessen, 0deg läuft also von unten nach oben, 90deg von links nach rechts und 180deg von oben nach unten – das ist die umgekehrte Konvention zu der, die die meisten Grafikprogramme verwenden. Interpoliert wird standardmäßig in sRGB, Kanal für Kanal, und deshalb kommt der Mittelpunkt zwischen Blau und Gelb grau heraus und nicht grün.
When to use it
- Einen Hintergrund für einen Hero- oder Seitenabschnitt erzeugen, ohne die Stopp-Syntax von Hand zu schreiben
- Ein dezentes Overlay aus zwei Stopps bauen, um Text sicher über ein Bild zu legen
- Einen konischen Verlauf für einen Fortschrittsring, ein Tortensegment oder einen Farbkreis erstellen
- Das exakte CSS für einen Verlauf erhalten, den das Design als Winkel und zwei Hex-Werte angegeben hat
Watch out for
- Ein Verlauf ist ein Bild, keine Farbe. Er setzt background-image, `background-color` scheint also weiterhin durch jede Transparenz hindurch und bleibt der Rückfallwert, falls der Verlauf nicht greift – setzen Sie beides.
- Zwei komplementäre Farbtöne interpolieren durch Grau hindurch. Ergänzen Sie einen Zwischenstopp in einem Farbton dazwischen oder geben Sie einen Interpolationsfarbraum wie `in oklch` an, damit der Übergang gesättigt bleibt.
- Große, kontrastarme Verläufe zeigen sichtbare Streifen. Acht Bit pro Kanal können keine weiche Rampe über 1000 Pixel nahezu gleicher Farbe ausdrücken; legen Sie ein dezentes Rauschen darüber oder vergrößern Sie den Farbabstand.
- Prozentuale Stopps beziehen sich auf die Verlaufslinie, nicht auf das Element, und die Verlaufslinie eines schrägen linearen Verlaufs ist länger als die Box. Ein Stopp bei 50 % ist also nur dann die geometrische Mitte des Elements, wenn der Winkel 0 oder 90 Grad beträgt.
Frequently Asked Questions
Wie erstellt man einen Farbverlauf als Hintergrund in CSS?
Nutzen Sie die Eigenschaft background mit einer Verlaufsfunktion: background: linear-gradient(135deg, #5C5BFE, #F2A03D). Das erste Argument ist der Winkel (0deg = von unten nach oben, 90deg = von links nach rechts). Für kreisförmige Verläufe nehmen Sie radial-gradient(), für Winkelverläufe conic-gradient().
Wie fügt man in CSS einen linearen Farbverlauf hinzu?
Ergänzen Sie an einem beliebigen Element background: linear-gradient(Richtung, Farbstopp1, Farbstopp2, …). Die Richtung kann ein Winkel (45deg) oder ein Schlüsselwort sein (to right, to bottom right). Beispiel: background: linear-gradient(to right, #667eea, #764ba2). Funktioniert an jedem Blockelement.
Wie verwendet man linear-gradient in CSS?
linear-gradient() erzeugt einen weichen Übergang zwischen Farbstopps entlang einer Linie. Nutzen Sie es für Schaltflächenhintergründe, Hero-Bereiche, Overlays auf Karten und diagonale Trenner. Mehrere Verläufe lassen sich durch Kommata getrennt übereinanderlegen. Dieser Builder gibt die CSS-Eigenschaft fertig zum Einfügen aus.
How to Use CSS Gradient Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.