Depth of Field

This component uses a masked blur overlay to simulate depth of field—where only part of the scene stays sharp and the rest falls out of focus. Toggle the effect with the button on the bottom-right. The 3D transform and perspective properties are covered in the Perspective¹ post — here we focus on the selective blur effect itself.

I created this component because, when I first learned After Effects, it was specifically to achieve a subtle blur effect for a brief clip in my Uniswap Flashtestations hype video².

Why couldn't I do this with CSS? Would've saved so much time.

Blur

Let's start with implementing a standard blur. A ::after pseudo-element covers the entire wrapper. It applies backdrop-filter: blur(3px), blurring everything behind it uniformly.

.aperture-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(3px);
  opacity: 1;
}

Without a mask, the blur is flat and covers everything equally:

But how can we make the blur more selective?

Radial Blur

A mask-image is applied to the same ::after element. It then uses a radial gradient where the alpha value at each stop controls how much of the blur layer is visible.

.aperture-wrapper::after {
  backdrop-filter: blur(3px);
  mask-image: radial-gradient(
    ellipse 55% 55% at 50% 45%,
    rgba(0, 0, 0, 0) 50%,     /* center — fully transparent, blur hidden */
    rgba(0, 0, 0, 0.3) 65%,   /* soft transition begins */
    rgba(0, 0, 0, 0.7) 80%,   /* blur mostly visible */
    #000 100%                  /* edges — fully opaque, full blur */
  );
}

The transparent blur gradient is an ellipse centered right above the middle (at 50% 45%). Starting from the center and going outward:

• 0–50% — mask is rgba(0,0,0,0) (transparent). This layer is completely transparent.
• 50–80% — alpha ramps from 0 to 0.7. The blur starts to fades in gradually.
• 80–100% — alpha reaches 1. The blur is visible and softens the edges.

This results in a transparent center that keeps the content sharp with more opaque edges let the blur through:

Combine

Add perspective: 1200px to the wrapper and a 3D rotation on the panel (rotateX(40deg) rotateY(20deg) rotateZ(-30deg) scale(1.8))¹, and now the masked blur becomes directional. If you've used After Effects, it simulates a camera focusing on part of a tilted surface.

By moving the gradient's center (at X% Y%), we can move the focal points across the card:

Press buttons 1-3 to cycle through different focal points.