Gradient Generator

Der Gradient-Generator erstellt CSS-Farbverläufe, die sich direkt in Webseiten, Komponenten, Banner oder Prototypen übernehmen lassen. Er hilft beim Abstimmen von Start- und Endfarben, Zwischenstopps, Richtung, Winkel und Transparenz, ohne jedes Mal CSS von Hand zu schreiben. Nützlich ist er besonders, wenn ein Verlauf nicht nur hübsch aussehen, sondern auch Lesbarkeit, Markenfarben und dunkle oder helle Oberflächen berücksichtigen soll. Das Ergebnis bleibt ein CSS-Wert; die eigentliche Qualität entsteht durch bewusst gewählte Farben, ausreichenden Kontrast und einen Verlauf, der den Inhalt unterstützt statt ihn zu überdecken. Bei gemeinsamer Nutzung sollten Eingaben, Annahmen und gewünschtes Ergebnis vorher klar sein, damit die Ausgabe nicht falsch interpretiert wird.

CSS-Gradiente sind Bildwerte, keine Farben – linear-gradient(), radial-gradient() und conic-gradient() werden zu <image>-Tokens aufgelöst, die der Browser in jedem background-image-, mask-image- oder border-image-Slot rasterisiert. Die lineare Form nimmt einen Winkel (0deg zeigt nach oben, 90deg nach rechts, im Uhrzeigersinn zunehmend) oder ein 'to <side>'-Keyword entgegen, das aus der Boxdiagonale berechnet wird, gefolgt von einer kommagetrennten Liste von Farbstops mit optionalen Prozent- oder Längenpositionen. Die radiale Form akzeptiert eine Form (circle | ellipse), ein Größen-Keyword (closest-side, farthest-corner ist der Standard) und einen 'at <position>'-Ankerpunkt. Die konische Form durchläuft Stops um einen Mittelpunkt, beginnend bei 'from <angle>', und wird in Chrome 69+, Safari 12.1+ und Firefox 83+ unterstützt.<br /><br />Die Farbinterpolation erfolgt standardmäßig in sRGB, was wahrgenommen nicht uniform ist und einen trüben grauen Streifen zwischen entfernten Farbtönen wie Blau und Gelb erzeugt. CSS Color Level 4 führte explizite Farbräume über die 'in <colorspace>'-Syntax ein – 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' – sodass Übergänge über das gesamte Spektrum chromatisch bleiben. Harte Farbbänder entstehen, wenn zwei Stops dieselbe Position haben ('red 50%, blue 50%'), und Farb-Hints verschieben den Mittelpunkt, ohne einen Stop einzufügen ('red, 20%, blue').<br /><br />Wenn ein Gradient die CSS-Pipeline verlassen muss, stellt Canvas dieselben Primitivfunktionen bereit: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) und createConicGradient(startAngle, x, y) geben CanvasGradient-Objekte zurück, die addColorStop(offset, color) akzeptieren und vor dem Export über toDataURL('image/png') an fillStyle zugewiesen werden können. SVG bietet die Markup-Äquivalente <linearGradient> und <radialGradient> mit spreadMethod-Werten 'pad' (Standard), 'reflect' und 'repeat' für Kachelverhalten.

• Lineare Form: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) – 0deg zeigt nach oben, zunehmend im Uhrzeigersinn; 'to bottom right' wird pro Boxabmessungen berechnet, nicht als buchstäbliche 135deg
• Radiale Form: radial-gradient([<shape> <size>]? at <position>, <stops>) – Größen-Keywords closest-side, closest-corner, farthest-side, farthest-corner (Standard)
• Konische Form: conic-gradient(from <angle> at <position>, <stops>) – dreht sich um den Mittelpunkt; Chrome 69+, Safari 12.1+, Firefox 83+
• Farbinterpolation: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' überschreibt den wahrgenommen nicht uniformen sRGB-Standard, der graue Mittelstreifen zwischen entfernten Farbtönen verursacht
• Harte Stops und Hints: Zwei Stops an derselben Position ('red 50%, blue 50%') erzeugen ein scharfes Band; ein einzelner Prozentwert ('red, 20%, blue') ist ein Farb-Hint, der den 50%-Mischpunkt verschiebt
• Canvas API: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) geben CanvasGradient zurück; addColorStop(offset, color) dann an fillStyle zuweisen
• SVG-Äquivalente: <linearGradient> und <radialGradient> mit spreadMethod='pad'|'reflect'|'repeat' steuern das Kacheln über die Gradient-Grenzen hinaus