Perfekte Farbverläufe in Webflow erstellen (5 Schritte)

Heute gibts eine 5 Schritte Anleitung um perfekte Gradients (Farbverläufe) in Webflow zu erstellen. Der Ursprung stammt von Fons Mans, der ein Twitter-Tutorial veröffentlicht hat, wie man Ultra-Gradients in Figma erstellt. Ich habe versucht das ganze einfach direkt in Webflow zu bauen, ohne irgendwelche Bilder oder Vektorformen zu importieren.

Mit der in Webflow zur Verfügung stehenden Blur-Funktion in Kombination mit dem Overlay Filter, bekommt man hier richtig geile Ergebnisse hin. Zusätzlich integrieren wir noch ein Noise-Layer, der die Schlieren, die bei Farbverläufen schnell mal entstehen können, etwas reduziert und dem Gradient einen tollen Effekt verleiht. Spontan habe ich im Tutorial auch noch eine Animation mit hinzugefügt, die dem Ganzen einen Future Charakter verleiht und in wenigen Schritte richtig was hermacht. Falls du mal kein Bildmaterial für eine Seite auf einer Website hast, sind Farbverläufe eine gute Wahl um eine spannenden Atmosphäre in die Seite zu integrieren. Zusammen mit einer großen Typo sehen sie einfach immer toll aus. Auch wenn sie schon länger als „Trend” abgeklatscht werden, werden sie seit Jahren immer wieder bei vielen Websites eingesetzt und sind hier um zu bleiben.

TIMESTAMPS

00:00 – Intro
01:26 – Struktur in Webflow
02:22 – Schritt 1: Hauptformen bauen
07:24 – Schritt 2: Blur
07:48 – Schritt 3: Kontrast-Formen bauen
08:38 – Schritt 4: Overlay Blending Mode
09:33 – Schritt 5: Noise hinzufügen
10:42 – Animation (optional)
12:29 – Ergebnis 😍