depth blur focus dof depth-of-field optical layering hero with blurred context elements focused call-to-action with ambient background camera-like depth composition flat UI layouts lack visual hierarchy all elements compete equally for attention need optical depth without real 3D transforms
Depth Blur
Fetch snippet JSON:
curl https://webspire.de/snippets/depth/depth-blur.json Depth
Depth stack
Background
Customize
Quick Start
<div class="depth-scene"><img data-depth="background" src="…"><div data-depth="foreground">Main content</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 770 bytes · 40 lines
- Custom Properties
-
--dof-blur-bg--dof-blur-mid--dof-duration - Classes
-
.depth-scene
depth blur focus dof depth-of-field optical layering
Uses data-depth attributes to classify elements: background, midground, foreground. The filter: blur() on background layers creates optical depth — the viewer’s eye naturally focuses on the unblurred foreground.
On hover, background blur reduces by half — a subtle focus-pull effect as the viewer “leans in”.
Product hero with depth
<div class="depth-scene relative min-h-80 flex items-center justify-center overflow-hidden rounded-2xl bg-slate-900">
<!-- Background: ambient glow, heavily blurred -->
<div data-depth="background"
style="position:absolute; inset:0; background: radial-gradient(ellipse at 30% 60%, oklch(55% 0.25 280 / 0.6), transparent 70%), radial-gradient(ellipse at 70% 30%, oklch(60% 0.2 340 / 0.4), transparent 70%);">
</div>
<!-- Midground: floating label -->
<span data-depth="midground"
style="position:absolute; top:2rem; right:2rem; background: oklch(60% 0.2 280 / 0.3); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem;">
v2.0 New
</span>
<!-- Foreground: main heading -->
<div data-depth="foreground" class="text-center px-8">
<h2 class="text-4xl font-black text-white mb-3">Webspire</h2>
<p class="text-slate-300 text-base">UI patterns for humans and agents.</p>
</div>
</div>