A Gradient Blur Component

I made a component for a gradient (progressive) background blur.

Simple Gradient Blur adds a smooth gradient blur to your Framer design. Drag it onto your canvas, pick a direction and you are done.

What's included

→ Smooth progressive blur, not a hard blur edge

→ Linear and radial blur

→ Many directions: top, bottom, top & bottom, left, right and all four corners (top left, top right, bottom left, bottom right)

→ Add a color to the blur for a soft tinted fade

→ Control blur strength, blur size and smoothness

→ Drag and drop. No code required

→ Works on top of images, video, text and CMS content

Suitable for

→ Text over images that stays readable

→ Sticky headers that melt into the page

→ Hero sections with depth

→ Cards with a soft, tinted fade

→ Fading out content at the edge of a scroll area

→ Vignette- or spotlight effects

A Gradient Blur Component

I made a component for a gradient (progressive) background blur.

Simple Gradient Blur adds a smooth gradient blur to your Framer design. Drag it onto your canvas, pick a direction and you are done.

What's included

→ Smooth progressive blur, not a hard blur edge

→ Linear and radial blur

→ Many directions: top, bottom, top & bottom, left, right and all four corners (top left, top right, bottom left, bottom right)

→ Add a color to the blur for a soft tinted fade

→ Control blur strength, blur size and smoothness

→ Drag and drop. No code required

→ Works on top of images, video, text and CMS content

Suitable for

→ Text over images that stays readable

→ Sticky headers that melt into the page

→ Hero sections with depth

→ Cards with a soft, tinted fade

→ Fading out content at the edge of a scroll area

→ Vignette- or spotlight effects