Helper2-teaser

Kleine Helfer No.2: CSS Gradient Generator

Kommentare 0
Blog

„Bin ich einmal nicht gut drauf, mach ich einen Farbverlauf.“

Das pflegte ein Gestaltungsprofessor von mir gern zu sagen, wenn er das Gefühl hatte, das der angehende Designer bei seiner Aufgabe zu schnell die Verlaufspalette als Allheilmittel verstanden hat.

Und dennoch ist dieses Gestaltungsmittel nach wie vor und trotz der großen Flat-Design-Welle im Webdesign einfach nicht wegzudenken. Wenn also doch mal ein Farbverlauf gewünscht ist gibt es eine ganze Reihe von Tools, die einem die Erstellung erleichtern können.

Ultimate CSS Gradient Generator:

Mit dem CSS Gradient Generator von ColorZilla beispielsweise, fühlt sich der Photoshopfreund wie zu Hause. Die Einstellungsmöglichkeiten sind sehr intuitiv und in ihrer Benutzeroberfläche an dem klassischen Grafikprogramm angelehnt. Der saubere CSS- oder SCSS-Code wird  für die gängigen Browser generiert.

gradientgeneratorscreenshot

Unique Gradient Generator:

Wer sich diese Farbverläufe über die Jahre schon längst übersehen hat, sollte sich den Unique Gradient Generator anschauen. Der Clou: Man kann unter anderem sein eigenes Bild hochladen und daraus einen Verlauf erzeugen. O.K. in Wahrheit wird ein kleiner Ausschnitt vom Bild stark aufgezogen und weichgezeichnet. Das was der Algorithmus daraus macht ist trotzdem sehr sehenswert und vor allem unique!

uniquegradientgenerator

UI Gradients:

Auf uigradients.com werden besonders moderne Farbverläufe vorgestellt. Zudem kann man hier seinen eigenen Gradient erstellen und posten. Der Socialgedanke steht also im Vordergrund. Natürlich erhält man auch hier den entsprechenden CSS-Code.

uigradiients

Blend:

Ein sehr schöner und intuitiv zu bedienender CSS-Gradient-Generator ist auch Blend. Einfach 2 Farbwerte auswählen, den Winkel definieren und das CSS erhalten.

Blend

Es gibt natürlich noch eine ganze Latte an weiteren Tools zur Erstellung von Farbverläufen. Hier habe ich aber bewusst nur diejenigen aufgeführt, die sich durch ihre jeweiligen Besonderheiten von der Masse absetzen.

Und dennoch möchte ich zu guter letzt auf ein weiteres Beispiel hinweisen.Auf Codepen zeigt Mario Klingemann eine animierte Visualisierung von Farbverläufen. Sehr sehr ansprechend!

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.

Schreibe einen Kommentar