Ultimate CSS Gradient Generator

Der Ultimate CSS Gradient Generator von ColorZilla ist ein tolles Tool um einfach und schnell mit CSS Farbverläufe zu erstellen. Die Oberfläche ähnelt sehr den Fenstern, die man aus Photoshop gewöhnt ist und erfordert kaum Einarbeitungszeit. Es gibt verschiedene vorgefertiget Verläufe, die man beliebig bearbeiten kann. Genauso kann man sich komplett eigene Verläufe erstellen. Das Tool generiert dann ganz einfach den passenden CSS-Code dazu.

Installiert man die Browsererweiterung von ColorZilla für Firefox oder Chrome  kann von jeder Website mit der Pipette ein Farbwert aufgenommen und in den Gradient Generator eingefügt werden. (Das Tool funktioniert natürlich auch ohne die Erweiterung durch das Eingeben der Farbwerte mit der Tastatur 😉 )

Die Position der Farbregler kann individuell verschoben werden und Transparenzen können mit den Reglern (über dem Verlaufsbalken) für die Deckkraft definiert werden. Man kann sehr komplexe Verläufe erstellen und so viele Farb- oder Deckkraftregler einzufügen wie man will. Helligkeit und Sättigung können angepasst werden – ebenso wie die Richtung des Verlaufs, die vertikal, horizontal, diagonal oder radial ausgegeben werden kann.

Hat man bereits eine Verlaufsgrafik kann diese hochgeladen werden und das Tool erstellt dazu den passenden CSS Code. Nette Funktion –  hat bei meinem Test aber noch nicht so flüssig funktioniert: der erstellte CSS3 Verlauf hatte viel zu viele Farbregler und hatte zu harte Übergänge. Da muss wohl noch ein bisschen nachgearbeitet werden.

Ist der Verlauf fertig erstellt, muss nur noch das generierte CSS in den Quellcode kopiert werden. Die Einstellungen können gespeichert werden und erhalten einen Permalink zum speichern oder weitergeben: Verlauf Onlinewerk.