Gradient Generator: Farbverlauf einfach erstellen


Mittwoch, 10.01.2018, 14:15 Uhr. Trackback | Zur Startseite.

CSS Farbverlauf

Verschiedene Online-Tools erstellen ganz schnell einen schicken Farbverlauf: Damit kann man zum Beispiel Buttons und andere Webseiten-Elemente mit einem Verlauf belegen, die einen leichten 3D Effekt erzeugen.

CSS Gradient Farbverlauf

Dies geht schnell und einfach zum Beispiel mit dem „Ultimate CSS Gradient Generator“ (zur Webseite), bei dem man die Farbwerte ähnlich wie in Adobes Photoshop einstellen kann und dann einen horizontalen, vertikalen, radialen oder diagonalen CSS Farbverlauf erstellen kann. Die nötigen CSS Codes für aktuelle und ältere Browser lassen sich anschließend direkt kopieren und in die eigenen Style-Sheet Klassen einfügen. Mehr zu der Erstellung der CSS Farbverläufe und den unterschiedlichen Möglichkeiten zum Selber-Erstellen eines Verlaufs zeigt die Webseite w3schools.

 
Farbverlauf als einzelne Farbwerte

Braucht man aber nicht nur die Anfangs- und Endwerte des Farbverlaufs, helfen diese Tools: Mit dem „RGB Color Gradient Maker“ kann man Start- und Zielfarbe wählen und dann die Anzahl der Schritte des Verlaufs einstellen. Anschließend erhält man die RGB und HSV Werte für den „Gradient“.

Farbverlauf erstellen

Ein anderes praktisches Tool ist der „Multiple HTML color gradient generator“ (zur Webseite): Hier lässt sich nicht nur die Start und Ziel-Farbe angeben, sondern auch Zwischenfarben: So kann man direkt den Verlauf von Rot über Blau nach Grün erstellen lassen, indem man auf „Add a color“ klickt. Besonders praktisch ist hier die Export-Funktion: Die so generierten Werte für die einzelnen Farben lassen sich anschließend direkt als einzelne Hex-Farbwerte oder als Array für PHP oder Javascript kopieren:

$gradient = array("0546FA","2E64FA","5883FB","9BB5FD","CDDAFE","FFFFFF");

Gradient Generator




 Ähnliche Beiträge zu '

Gradient Generator: Farbverlauf einfach erstellen

'