CSS-Verläufe aus Bildern generieren: CSS Gradient Finder

css-3-logo-icon-gradient

Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Grundsätzlich funktioniert das Tool mit linearen Verläufen einwandfrei, je nach Komplexität des Verlaufs sind allerdings leichte Unterschiede zwischen dem hochgeladenen Bild und dem generierten Verlauf zu erkennen. In der Beispiel-Galerie des „CSS Gradient Finders“ kann man das ebenfalls leicht erkennen.
Im Gegensatz zu vielen anderen Online-Tools steht beim CSS Gradient Finder auch die zum Einsatz kommende Technologie im Vordergrund. Auf GitHub und auf der Website selbst kann der Code eingesehen werden.

Screenshot des CSS3 Gradient Finders
Website des Gradient Finders mit Drag & Drop Upload

Der CSS Gradient Finder benötigt einen Browser mit Canvas-Unterstützung um zu funktionieren. Welche Browser das sind seht ihr hier (Alle außer IE < 9).

Ultimate CSS Gradient Generator als Alternative

Der Ultimate CSS Gradient Generator von Colorzilla kann übrigens mittlerweile auch Verläufe aus Bildern erstellen. Der importierte Verlauf lässt sich anschließend sogar noch über ein Bedienfeld anpassen oder korrigieren und der exportierte Quellcode ist Internet Explorer 9 kompatibel.