CSS-Gradient-Generator

Lineare Verläufe lassen die Farben entlang einer geraden Linie (horizontal, vertikal oder diagonal) ineinander übergehen, so dass ein gerichteter Fluss von einer Farbe zur anderen entsteht. Radiale Verläufe strahlen von einem Mittelpunkt aus nach außen in einem kreisförmigen oder elliptischen Muster. Verwenden Sie lineare Farbverläufe für richtungsweisende Betonung und moderne Oberflächen und radiale Farbverläufe für Spotlight-Effekte, Schaltflächen oder organisches visuelles Interesse.

Sie können den Neigungswinkel in Grad angeben (0° bis 360°) oder Schlüsselwörter wie "nach rechts", "nach unten", "nach rechts oben" usw. verwenden. 0Grad zeigt nach oben, 90Grad nach rechts, 180Grad nach unten und 270Grad nach links. Der Winkel bestimmt die Achse, entlang der die Farben übergehen, und gibt Ihnen die vollständige Kontrolle über die Richtung des Farbverlaufs.

Ja! CSS-Verläufe unterstützen eine unbegrenzte Anzahl von Farbstopps. Sie können mehrere Farben hinzufügen, um komplexe, mehrfarbige Farbverläufe zu erstellen. Jede Farbe kann mit einem optionalen Positionsprozentsatz (0 % bis 100 %) versehen werden, um zu steuern, wo sie im Farbverlauf erscheint. Dies ist ideal für die Erstellung von Regenbogeneffekten, Sonnenuntergangsverläufen oder anspruchsvollen Farbübergängen.

Verwenden Sie zwei Farben, die in Farbton, Sättigung oder Helligkeit ähnlich sind. Gehen Sie zum Beispiel von einem mittleren Blau zu einem etwas helleren oder dunkleren Blau über. Halten Sie den Kontrast niedrig und verwenden Sie HSL-Werte, bei denen Sie die Helligkeit nur um 10-20 % anpassen. Subtile Farbverläufe verleihen Tiefe und visuelles Interesse, ohne den Inhalt zu erdrücken.

Moderne CSS-Farbverläufe (mit linearem und radialem Farbverlauf) werden in allen aktuellen Browsern ohne Herstellerpräfixe unterstützt. Wenn Sie jedoch sehr alte Browser (IE9 und früher) unterstützen müssen, benötigen Sie möglicherweise Herstellerpräfixe (-webkit-, -moz-, -o-) oder Fallback-Volltonfarben. Bei der modernen Webentwicklung funktioniert die standardmäßige CSS-Gradientensyntax überall.

Positionieren Sie die Farbabstände gleichmäßig und vermeiden Sie drastische Farbsprünge. Verwenden Sie zwischen den extremen Farben Zwischenstopps, um sanftere Übergänge zu schaffen. Bei radialen Farbverläufen sollten Sie mit der Form (Kreis oder Ellipse) und der Position experimentieren. Erwägen Sie die Verwendung von Farben mit ähnlichen Sättigungs- und Helligkeitswerten oder arbeiten Sie im HSL-Raum, wo Sie sanfte Farbtonübergänge schaffen können.

Radiale Verläufe können kreisförmig (gleichmäßig in alle Richtungen) oder elliptisch (gestreckt, um in den Container zu passen) sein. Kreise eignen sich gut für Spotlight-Effekte und zentrierte Designs, während Ellipsen besser für Hintergründe geeignet sind, die rechteckige Bereiche gleichmäßig abdecken müssen. Mit dem Parameter shape können Sie dieses Verhalten steuern.

Ja! Verwenden Sie für diagonale Verläufe Winkel zwischen 0° und 360°. 45 Grad erzeugt eine perfekte Diagonale von unten links nach oben rechts, 135 Grad von unten rechts nach oben links. Diagonale Verläufe sorgen für ein dynamisches visuelles Interesse und können das Auge durch Ihr Design führen.

Verwenden Sie RGBA- oder HSLA-Farbformate mit einem Alphakanal, um Farbverläufe zu erstellen, die zu Transparenz verblassen. Dies ist ideal für Überlagerungseffekte, Bildmasken oder zur Erzeugung von Tiefe. Zum Beispiel erzeugt der Verlauf von rgba(0,0,0,1) nach rgba(0,0,0,0) eine Überblendung zu transparentem Schwarz.