---
title: "Scroll Blur Overlay — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Filip Banasiak · Effects. Stunning scroll based blur effect"
canonical: "https://framer.elliotli.dev/component/scroll-blur-overlay"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Scroll Blur Overlay

# Scroll Blur Overlay

Stunning scroll based blur effect

[View on Framer](https://framer.com/marketplace/components/scroll-blur-overlay/?via=elliot-li)

![Scroll Blur Overlay preview image 1](https://framer.elliotli.dev/og/component/scroll-blur-overlay/2191ab5be9b7cefc/1600x1200.jpg)

## Summary

Stunning scroll based blur effect

## Description

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

**Key Features:**

-   Smooth, performance-optimized blur tied to scroll position
    
-   iOS-style backdrop blur for a premium native app feel
    
-   Viewport-relative positioning — works under sections of any height, including 100vh heroes, with no manual pixel offset
    
-   "Extend Above" mode to blur the section above instead of its own section
    
-   Threshold in px or vh, so the effect feels consistent across screen sizes
    
-   Responsive on all screen sizes and breakpoints
    

**Customizable Properties:**

-   **Background Color:** overlay tint color
    
-   **Opacity:** overlay transparency (0–1)
    
-   **Max Blur:** maximum blur intensity (0–50px)
    
-   **Start Line:** viewport point (0–100vh) where blur begins
    
-   **Threshold:** scroll distance to reach max blur, in px or vh
    
-   **Extend Above:** shifts the overlay up by its own height to blur the section above it
    

**How It Works:** Place the component inside a section — it automatically tracks its own position relative to the viewport, no offset math needed. Blur starts at your Start Line and increases until your Threshold, creating a smooth transition. Enable Extend Above for sticky-stacked layouts or full-height heroes.

**Perfect For:** Designers adding sophisticated iOS-inspired scroll interactions without code, for full-screen heroes and sticky-stacked layouts.

**Refund Policy:** Due to the digital nature of this product, all sales are final and non-refundable. Refunds are only provided if there is a documented technical issue where the component does not work as intended or as described. Refunds will not be issued if the component works correctly but does not meet your expectations or does not work the way you would prefer.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1369

## Details

- **Author**: Filip Banasiak
- **Price**: $7.00
- **Published**: 2026-04-15
- **Updated**: 2026-10-07
- **Added**: 2026-04-11
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows