New
New
New
Guide
- Effects
- Blur
- How-to
Guide
- Effects
- Blur
- How-to
Guide
- Effects
- Blur
- How-to
How to Add Progressive Blur to A Framer Website
I’ll show you how to easily add a sleek, progressive blur effect to your website using the Blur Gradient Component for Framer.
Posted by
Nandi
Table of contents
Okay, so what’s the big deal with progressive blur? Well my friend, instead of just slapping a fixed blur on your element, this component dynamically calculates progress blur values, creating a cool little effect inspired by Apple’s design language.
See how it works on the image below.
Okay, so what’s the big deal with progressive blur? Well my friend, instead of just slapping a fixed blur on your element, this component dynamically calculates progress blur values, creating a cool little effect inspired by Apple’s design language.
See how it works on the image below.
Okay, so what’s the big deal with progressive blur? Well my friend, instead of just slapping a fixed blur on your element, this component dynamically calculates progress blur values, creating a cool little effect inspired by Apple’s design language.
See how it works on the image below.
Progressive blur component structure.
Progressive blur component structure.
Progressive blur component structure.
Getting started
Here’s how you set it up:
Drag and drop: Just copy the Blur Gradient Component and paste it onto your canvas.
Position it: Place it over any element you want to blur. It’s really that easy!
Quick tip: use absolute positioning and z-index if needed to position it over certain elements.
Making it your own
What’s awesome about this component is that you don’t need to touch any code. You can customize everything through its properties, which makes life so much easier. :)
Blur amount: You can dial up or tone down the blur to get just the right effect. Since the blur is calculated progressively, you’ll get a seamless transition.
Corner radius: Want to round those edges? You can totally do that. Just a heads-up, though: make sure the parent frame has a corner radius of 0, or else it’ll mess things up. Keep the radius adjustments within the Blur Gradient’s properties.
Blur direction: Whether you want the blur to flow from the top, bottom, left, or right, you’ve got full control. It’s perfect for guiding your visitors’ eyes where you want them to go.
Getting started
Here’s how you set it up:
Drag and drop: Just copy the Blur Gradient Component and paste it onto your canvas.
Position it: Place it over any element you want to blur. It’s really that easy!
Quick tip: use absolute positioning and z-index if needed to position it over certain elements.
Making it your own
What’s awesome about this component is that you don’t need to touch any code. You can customize everything through its properties, which makes life so much easier. :)
Blur amount: You can dial up or tone down the blur to get just the right effect. Since the blur is calculated progressively, you’ll get a seamless transition.
Corner radius: Want to round those edges? You can totally do that. Just a heads-up, though: make sure the parent frame has a corner radius of 0, or else it’ll mess things up. Keep the radius adjustments within the Blur Gradient’s properties.
Blur direction: Whether you want the blur to flow from the top, bottom, left, or right, you’ve got full control. It’s perfect for guiding your visitors’ eyes where you want them to go.
Getting started
Here’s how you set it up:
Drag and drop: Just copy the Blur Gradient Component and paste it onto your canvas.
Position it: Place it over any element you want to blur. It’s really that easy!
Quick tip: use absolute positioning and z-index if needed to position it over certain elements.
Making it your own
What’s awesome about this component is that you don’t need to touch any code. You can customize everything through its properties, which makes life so much easier. :)
Blur amount: You can dial up or tone down the blur to get just the right effect. Since the blur is calculated progressively, you’ll get a seamless transition.
Corner radius: Want to round those edges? You can totally do that. Just a heads-up, though: make sure the parent frame has a corner radius of 0, or else it’ll mess things up. Keep the radius adjustments within the Blur Gradient’s properties.
Blur direction: Whether you want the blur to flow from the top, bottom, left, or right, you’ve got full control. It’s perfect for guiding your visitors’ eyes where you want them to go.
Blur gradient component properties.
Blur gradient component properties.
Blur gradient component properties.
Wrapping up
The Blur Gradient Component makes it easy to add a progressive blur effect to your website. With simple customization options, you can adjust the blur amount, corner radius, and direction to fit your design. Copy it to your project and start using it now!
Wrapping up
The Blur Gradient Component makes it easy to add a progressive blur effect to your website. With simple customization options, you can adjust the blur amount, corner radius, and direction to fit your design. Copy it to your project and start using it now!
Wrapping up
The Blur Gradient Component makes it easy to add a progressive blur effect to your website. With simple customization options, you can adjust the blur amount, corner radius, and direction to fit your design. Copy it to your project and start using it now!
