---
title: "Scrolling Blur — Free Framer component · Best of Framer"
description: "Free Framer component · by BuiltByKern · Effects. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/scrolling-blur"
---

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

# Scrolling Blur

Pinned chrome blur that follows sc

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

![Scrolling Blur preview image 1](https://framer.elliotli.dev/og/component/scrolling-blur/aa50d7a70d241abc/1600x1193.jpg)

## Summary

Soft backdrop blur

## Description

Kern\_ScrollBlur stacks soft-masked backdrop-filter layers across the full frame. Peak blur sits at the pinned edge; the curve softens toward content so the transition reads as intentional motion design — not a CSS hack.

Controls (all from the panel):

Shape: Edge / U / ∩ (vertical segmented). Edge = vertical fade. U = cupped clear center. ∩ = hard center, soft sides.

Position: Bottom or Top. Where the blur is densest.

Strength: Peak blur in px (2–10). Defaults tuned for subtle editorial chrome.

Mode: Always On / Follow Scroll / Off. Follow Scroll uses visibility (Safari-safe), not opacity on filter layers.

Settle: Idle delay after the last scroll before hide (Follow Scroll only). Not a fade duration.

Production guardrails:

→ No opacity / isolation / clip-path on backdrop-filter parents

→ Peak blur capped for Safari stability

→ Adaptive layer count by Strength

→ useInView: pause scroll listeners + skip layers off-screen

→ Canvas-safe Follow Scroll preview (Always On while editing)

→ prefers-reduced-motion: weaker static blur, no Follow Scroll

→ pointer-events: none — never blocks clicks underneath

→ Zero external dependencies

How to place:

1\. Add Scroll Blur to your page.

2\. Pin it (fixed) over the breakpoint frame; size to the chrome band you want covered (full width, modest height or full frame — masks handle the falloff).

3\. Set Position to Top for nav chrome or Bottom for footer/dock.

4\. Tune Shape + Strength. Start around Strength 8.

5\. For scroll-reactive chrome: Mode → Follow Scroll, open Preview, scroll. Adjust Settle if hide feels early/late.

Defaults are subtle — editorial out of the box.

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

-   All · #2198

## Details

- **Author**: BuiltByKern
- **Published**: 2026-07-19
- **Updated**: 2026-09-25
- **Added**: 2026-07-19
- **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