Blur Gradient Component

Blur Gradient Component

Blur Gradient Component

Blur Gradient Component

Component

Component

Component

Component

Blur Gradient Component

Blur Gradient Component

Blur Gradient Component

Blur Gradient Component

This is a blur gradient component for Framer that you can just easily drag and drop onto your canvas. Place it over any element to add a progressive blur effect to it.

This is a blur gradient component for Framer that you can just easily drag and drop onto your canvas. Place it over any element to add a progressive blur effect to it.

This is a blur gradient component for Framer that you can just easily drag and drop onto your canvas. Place it over any element to add a progressive blur effect to it.

This is a blur gradient component for Framer that you can just easily drag and drop onto your canvas. Place it over any element to add a progressive blur effect to it.

Blur Gradient Component for Framer
Blur Gradient Component for Framer
Blur Gradient Component for Framer
Blur Gradient Component for Framer

Copy component

Copy component

Copy component

Copy component

Features

The component is fully customizable through component properties, so you don't have to touch any code.

blur gradient component properties

Firstly, you can adjust the blur amount. What's really cool about this component is that it doesn't just apply a mask to a single frame with a fixed background blur value. Instead, it calculates progressive blur values dynamically, achieving a more refined effect.

Here's how it works:

calculating progressive blur values

You can also mess with the corner radius for the blur gradient component.

IMPORTANT: The parent frame of the blur gradient component can't have a corner radius 'cause it'll break the component. So if you want a corner radius, make sure to slap it on the blur gradient itself through its properties, and keep the parent's radius at 0, no exceptions.

The last thing you can fiddle with is the blur direction. Maybe you wanna blur the lower part of the component, or the top, left, or even the right.

Step 01 outline

Step / 01

Copy the component.

Step 2 outline

Step / 02

Paste on your Framer canvas.

Step 3 outline

Step / 03

Customize it via the properties panel.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.