CSS-Gradient-Generator

Lineare Farbverläufe lassen Farben entlang einer geraden Linie ineinander übergehen – horizontal, vertikal oder diagonal – und erzeugen so einen gerichteten Übergang von einer Farbe zur anderen. Radiale Farbverläufe breiten sich von einem Mittelpunkt kreisförmig oder elliptisch nach außen aus. Nutze lineare Farbverläufe für eine gerichtete Betonung und moderne Benutzeroberflächen, radiale Farbverläufe für Spotlight-Effekte, Buttons oder einen organischen Look.

Du kannst den Winkel des Farbverlaufs in Grad festlegen (0deg bis 360deg) oder Schlüsselwörter wie 'to right', 'to bottom', 'to top right' usw. verwenden. 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten und 270deg nach links. Der Winkel bestimmt die Achse, entlang der die Farben ineinander übergehen, und gibt dir die volle Kontrolle über die Verlaufsrichtung.

Ja! CSS-Farbverläufe unterstützen unbegrenzt viele Farbstopps. Du kannst mehrere Farben hinzufügen, um komplexe, mehrfarbige Verläufe zu erstellen. Für jede Farbe kannst du optional eine Position in Prozent (0% bis 100%) festlegen, um zu bestimmen, wo sie im Verlauf erscheint. So kannst du Regenbogeneffekte, Sonnenuntergangsverläufe oder raffinierte Farbübergänge gestalten.

Verwende zwei Farben, die sich in Farbton, Sättigung oder Helligkeit ähneln. Lass zum Beispiel ein mittleres Blau in ein etwas helleres oder dunkleres Blau übergehen. Halte den Kontrast niedrig und ziehe HSL-Werte in Betracht, bei denen du nur die Helligkeit um 10-20% anpasst. Dezente Farbverläufe schaffen Tiefe und visuelles Interesse, ohne vom Inhalt abzulenken.

Moderne CSS-Farbverläufe mit linear-gradient und radial-gradient werden von allen aktuellen Browsern ohne Vendor-Präfixe unterstützt. Für sehr alte Browser (IE9 und älter) benötigst du möglicherweise Vendor-Präfixe (-webkit-, -moz-, -o-) oder einfarbige Fallbacks. Für die moderne Web-Entwicklung funktioniert die standardmäßige CSS-Syntax für Farbverläufe überall.

Verteile die Farbstopps gleichmäßig und vermeide abrupte Farbsprünge. Setze zwischen stark unterschiedlichen Farben Zwischenstopps, um weichere Übergänge zu schaffen. Experimentiere bei radialen Farbverläufen mit der Form (Kreis oder Ellipse) und der Position. Wähle Farben mit ähnlichen Sättigungs- und Helligkeitswerten oder arbeite im HSL-Farbraum, um weiche Farbtonübergänge zu erzeugen.

Radiale Farbverläufe können kreisförmig sein (in alle Richtungen gleichmäßig) oder elliptisch (an den Container angepasst). Kreise eignen sich gut für Spotlight-Effekte und zentrierte Designs, Ellipsen für Hintergründe, die rechteckige Flächen gleichmäßig abdecken sollen. Über den Formparameter kannst du das festlegen.

Ja! Verwende Winkel zwischen 0deg und 360deg für diagonale Farbverläufe. 45deg ergibt eine perfekte Diagonale von links unten nach rechts oben, 135deg verläuft von rechts unten nach links oben. Diagonale Farbverläufe sorgen für dynamisches visuelles Interesse und können den Blick durch dein Design lenken.

Verwende RGBA- oder HSLA-Farbformate mit Alphakanal, um Farbverläufe zu erstellen, die transparent ausblenden. Das eignet sich perfekt für Overlay-Effekte, Bildmasken oder mehr Tiefe. Ein Farbverlauf von rgba(0,0,0,1) zu rgba(0,0,0,0) blendet zum Beispiel in transparentes Schwarz aus.

Farbstopps legen fest, wo jede Farbe im Verlauf erscheint (0% bis 100%). Gleichmäßige Abstände sorgen für weiche Übergänge, eng beieinanderliegende Stopps für abrupte Farbwechsel. Zwei Farben bei 50% erzeugen zum Beispiel eine harte Kante, während Stopps bei 40% und 60% weich ineinander übergehen.