CameraIntermediate

Focus Blur

The background melts out of focus when a menu or dialogue opens — the lens itself says 'look here now'.

camerapost-processingdepth-of-fieldui

Examples

Captured from this page's own interactive demo below.

Overview

Depth of field is a photographer's pointing finger: whatever is sharp is what matters. Games borrow it as a state change — pause the game and the battlefield blurs behind the menu; start a dialogue and everything but the speaker softens. The blur does three jobs at once: it directs the eye, it visually mutes a world that no longer needs watching, and it makes the UI feel physically closer than the game.

Transition is everything. Ease the blur in over two or three hundred milliseconds — a focus pull, not a switch flip — and ease it back slightly faster on close, because the player has already decided to return to action and the game should feel eager. Pair the blur with a subtle dim (10–20% darker) and the foreground UI needs no heavy panel backgrounds at all.

In-gameplay focus blur is a sharper knife: aiming down sights can soften everything beyond the scope, a sniper's breath-hold can blur the near geometry. Use it only where the game has genuinely narrowed the player's task, and never blur things the player is still expected to react to — a soft background must always mean 'this is safe to ignore'.

Interactive Demo

the game keeps running — Pause pulls the focus

Blur Amount8px

Focus Pull300ms

Use Cases

Pause and inventory menusDialogue and cutscene focusAiming down sightsDeath and level-complete screens

Best Practices

Do

✓Ease the blur in like a focus pull (~300 ms) and back out slightly faster — closing should feel eager.
✓Pair blur with a mild dim so the UI reads without heavy opaque panels.
✓Keep the UI on a layer the blur can never touch, in both renderer and mind.

Don't

✕Don't hard-cut to full blur in one frame; an instant defocus reads as a graphics driver hiccup.
✕Don't blur anything the player must still react to — soft focus is a promise that it's safe to ignore.
✕Don't stack focus blur with motion blur and chromatic aberration at once; three lens effects deep, the frame is soup.

Common Mistakes

⚠Blurring the whole screen including the menu itself because the post-processing volume sits after UI compositing.
⚠A gorgeous 40 px gaussian blur that costs 4 ms of GPU on the very screen where the game is supposed to be resting.
⚠Leaving the world crisp behind a pause menu, then wondering why players report the menu 'feels like a browser popup'.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Focus Blur" game-feel effect to my project: The background melts out of focus when a menu or dialogue opens — the lens itself says 'look here now'.

How it works: Depth of field is a photographer's pointing finger: whatever is sharp is what matters. Games borrow it as a state change — pause the game and the battlefield blurs behind the menu; start a dialogue and everything but the speaker softens. The blur does three jobs at once: it directs the eye, it visually mutes a world that no longer needs watching, and it makes the UI feel physically closer than the game.

Guidelines:
- Ease the blur in like a focus pull (~300 ms) and back out slightly faster — closing should feel eager.
- Pair blur with a mild dim so the UI reads without heavy opaque panels.
- Keep the UI on a layer the blur can never touch, in both renderer and mind.

Avoid:
- Don't hard-cut to full blur in one frame; an instant defocus reads as a graphics driver hiccup.
- Don't blur anything the player must still react to — soft focus is a promise that it's safe to ignore.
- Don't stack focus blur with motion blur and chromatic aberration at once; three lens effects deep, the frame is soup.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.