Gradient Depth Blur

Apple style progressive depth blur by Igor Reif

Show Preview
Gradient Depth Blur

About Gradient Depth Blur

Powered by an optical depth engine with built in color vibrancy, tint control, fine grain SVG noise, blur direction (🡡, 🡣, 🡢, 🡠) and custom overlay tint with opacity control.

OVERVIEW

Gradient Depth Blur uses an 8-layer backdrop filter algorithm to eliminate harsh blur edges and deliver a seamless transition.

Just like native macOS and iOS interface elements.

Unlike basic CSS blurs that abruptly cut off, this component smoothly interpolates depth, saturation, and custom noise to give your headers, footers, and modal backdrops a premium and polished feel.

FEATURES

  1. 8-Layer Optical Blur Engine: Multi layered progressive rendering for ultra smooth depth transitions with zero harsh borders.

  2. 4 Directional Controls: Seamlessly fade with single-click direction controls.

  3. Vibrancy & Saturation Boost: Keep background colors vivid and vibrant even under ultraheavy blur settings.

  4. Monochrome SVG Noise: Add subtle texture using optimized procedural noise that won't break backdrop rendering performance.

  5. Custom Tinting Layer: Blend solid background colors with custom opacity to craft dark mode, frosted glass, or subtle modern overlays.

  6. GPU Accelerated Performance: Engineered with translateZ(0) hardware acceleration to bypass common z-index rendering bugs across all modern browsers.