Scroll Blur Overlay

Scroll Blur Overlay

Create stunning iOS-inspired scroll-based
blur effects that respond to user interaction.

SCROLL DOWN

About

This component applies a dynamic backdrop blur that gradually increases as users scroll down the page, mimicking the elegant frosted glass effect found throughout iOS interfaces.

How It Works?

Place the component over your content and it will automatically track scroll position. The blur effect starts at your defined offset and gradually increases until reaching your scroll threshold, creating a smooth, professional transition that adds polish to any design - just like iOS.

What You Get?

Remix Link: To a page which includes the following:

Scroll Blur Overlay Component: Unlimited usage in your projects
Detailed instruction: See exactly how this example is set up

Remix Link: To a page which includes the following:

Scroll Blur Overlay Component: Unlimited usage in your projects
Detailed instruction: See exactly how this example is set up

Remix Link: To a page which includes the following:

Scroll Blur Overlay Component: Unlimited usage in your projects
Detailed instruction: See exactly how this example is set up

Customizable Properties

Background Color: Set the overlay tint color
Opacity: Control overlay transparency
Max Blur: Maximum blur intensity in pixels
Scroll Offset: Delay the blur effect start
Scroll Threshold: Distance in pixels to reach maximum blur

Background Color: Set the overlay tint color
Opacity: Control overlay transparency
Max Blur: Maximum blur intensity in pixels
Scroll Offset: Delay the blur effect start
Scroll Threshold: Distance in pixels to reach maximum blur

Background Color: Set the overlay tint color
Opacity: Control overlay transparency
Max Blur: Maximum blur intensity in pixels
Scroll Offset: Delay the blur effect start
Scroll Threshold: Distance in pixels to reach maximum blur

Create a free website with Framer, the website builder loved by startups, designers and agencies.