Create Perfect Gradients in Webflow (5 Steps)

Today is a 5-step guide to creating perfect gradients in Webflow. The origin comes from Fons Mans, who posted a Twitter tutorial on how to create Ultra Gradients in Figma. I've tried to simply build the whole thing directly into Webflow without importing any images or vector forms.

With the Blur function available in Webflow in combination with the overlay filter, you get really great results here. In addition, we also integrate a noise layer that slightly reduces the streaks that can quickly occur during color gradients and gives the gradient a great effect. I also spontaneously added an animation to the tutorial, which gives the whole thing a future character and really makes something special in just a few steps. If you don't have any images for a page on a website, color gradients are a good choice to integrate an exciting atmosphere into the page. Together with a big typo, they always look great. Even though they have been described as a “trend” for a long time, they have been used time and again on many websites for years and are here to stay.

TIMESTAMPS

00:00 — Intro
01:26 — Structure in Webflow
02:22 — Step 1: Build main shapes
07:24 — Step 2: Blur
07:48 — Step 3: Build contrast forms
08:38 — Step 4: Overlay Blending Mode
09:33 — Step 5: Add Noise
10:42 — Animation (optional)
12:29 — Score 😍