Toggle Sidebar B
AppearanceLight & dark mode D

Gradual Blur

Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.

Default

Scroll the content inside the box. GradualBlur sits on top of its parent and blurs whatever passes under the edge. Target Page pins it to the browser window instead.

Light previewReplay previewOpen in new tab

Scroll Down.

Lighthouse in the distance with purple colors.

Gradual Blur

Customize

Position
Target
Strength2
Div Count5
Opacity1

API Reference

GradualBlur

PropTypeDefaultDescription
position"top" | "bottom" | "left" | "right""bottom"Edge to attach the blur overlay.
strengthnumber2Base blur strength multiplier (affects each layer).
heightstring"6rem"Overlay height (for top / bottom positions).
widthstringundefinedCustom width (optional). Defaults to 100% for vertical positions or matches height for horizontal positions.
divCountnumber5Number of stacked blur layers (higher = smoother gradient).
exponentialbooleanfalseUse exponential progression for stronger end blur.
curve"linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out""linear"Distribution curve applied to layer progression.
opacitynumber1Opacity applied to each blur layer.
animatedboolean | "scroll"falseFade in (true) or reveal on scroll ("scroll").
durationstring"0.3s"Animation duration (when animated).
easingstring"ease-out"Animation easing (opacity / backdrop-filter).
hoverIntensitynumberundefinedMultiplier applied to strength while hovered.
target"parent" | "page""parent"Position relative to parent container or the entire page (fixed).
presetstringundefinedApply a predefined configuration bundle: top, bottom, left, right, subtle, intense, smooth, sharp, header, footer, sidebar, page-header or page-footer.
responsivebooleanfalseEnable internal responsive recalculation (experimental).
zIndexnumber1000Base z-index (page target adds +100).

Events

PropTypeDefaultDescription
animation-complete() => void-Fired after the animated reveal completes. The original calls this onAnimationComplete.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The overlay never takes pointer events unless hoverIntensity is set, so the content underneath stays clickable and focusable.
  • Blur hides text that scrolls under it. Keep important controls out of the blurred edge.
Glow CursorHalftone Reveal