201007Okt

Ultimate CSS Gradient Generator: Verläufe im Browser

Alex Sirota, der Entwickler hinter ColorZilla, hat ein sehr schönes Online-Werkzeug zum Erstellen von Farbverläufen veröffentlicht. Mit dem "Ultimate CSS Gradient Generator" lassen sich wie in Photoshop Verläufe mit mehreren Punkten (Stops) erstellen, so dass verschiedene Effekte und Beleuchtungen simuliert werden können. Das Verschieben der Punkte ändert die Darstellung des Verlaufs in Echtzeit, so dass der Effekt direkt betrachtet werden kann.

Ultimate CSS Gradient Generator

Bei dem Verlaufswerkzeug liegen bereits etliche Presets vor, die per Klick auf den aktuellen Verlauf angewendet werden können. Zudem können die Größe des Verlaufsbereichs sowie die Richtung (Orientation) des Verlaufs eingestellt werden. Als Ausgabe wird CSS3-Code generiert, der in Firefox, Safari und Chrome funktioniert — für Internet Explorer wird ein Fallback-Verlauf ausgegeben, der allerdings keine Stops beinhaltet.
Neben dem eigentlichen Zweck, CSS3-Code zu erstellen, eignet sich das Tool auch für das Experimentieren mit Farbverläufen an, da es eine Echtzeit-Vorschau bietet und zudem mit einem sehr guten Farbwähler (Color Picker) ausgestattet ist.

Kommentare

Marco schrieb am 08.10.2010 #1

Schon beeindruckend, wenn man bedenkt, dass alle diese kleinen Preset-Kästen aus CSS bestehen.
Super Tool, danke für den Link!

charty schrieb am 10.10.2010 #2

Sehr nützlich, vielen Dank!