Depth of Field

A photograph picks a focus plane; everything else softens. Interfaces can do the same. Depth of field puts one layer sharp and lets near or far layers take a soft blur so hierarchy is optical, not just typographic.

Change the focus plane.

Near, mid, and far are the same cards at different distances. When mid is sharp, the others blur and scale back slightly. You know what to read without a louder border or a purple glow.

Use it for attention, not decoration

DOF earns its keep when something modal or transient takes the plane: a dialog over a list, a selected card in a stack, a tooltip over a hero. Do not keep three layers permanently blurred on a settings page — that is atmosphere without a job, and blur() is not free.

Match blur strength to distance: one step away gets ~2px, two steps ~4px. Pair with a slight scale-down so the soft layers also feel farther, not just smeared.

Usage

<div class="relative h-48 overflow-hidden rounded-xl bg-neutral-950">
    <div class="absolute left-6 top-8 scale-95 rounded-lg bg-slate-800 blur-[4px]">Far</div>
    <div class="relative z-10 rounded-xl bg-slate-700 shadow-xl">Mid (focus)</div>
    <div class="absolute bottom-4 right-4 z-20 scale-[0.97] rounded-lg bg-card blur-[2px]">Near</div>
</div>

.plane { transition: filter 300ms, transform 300ms; }

.plane[data-focus="false"] {
    filter: blur(2px);
    transform: scale(0.97);
    opacity: 0.85;
}

.plane[data-focus="true"] {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
}

Prefer CSS filter: blur() on contained layers over baking bokeh into images when the focus plane needs to move interactively.