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
Start Line: Viewport point where the blur effect begins
Threshold: Scroll distance to reach maximum blur, in pixels or vh
Extend Above: Enable to blur the section above it instead of its own