The component is fully customizable through component properties, so you don't have to touch any code.
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:
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
Copy the component.
Step / 02
Paste on your Framer canvas.
Step / 03
Customize it via the properties panel.