Scroll Blur
Progressive Scroll Blur adds a blur effect to the top and bottom edges that reacts to how fast the user is scrolling.
Make it with Workshop
Build your own component with AI
About this Component
Give your scrollable sections a subtle, elegant touch. Progressive Scroll Blur adds a blur effect to the top and bottom edges that reacts to how fast the user is scrolling. The faster the scroll, the stronger the blur. When scrolling stops, the blur fades out smoothly.
You can choose where the blur appears (top, bottom, or both), adjust its size, intensity, and how sensitive it is to scroll speed. There's also an optional color overlay to match your style.
Perfect for content-heavy layouts, sticky sections, or any scrollable container where you want to add depth and visual polish. Clean, smooth and fully responsive, ready to drop into any Framer project.
