Blurring backgrounds correctly with CSS.

I've been exploring the fediverse recently and came across Niki Tonsky's post on blurring. Essentially, directly applying a backdrop-filter on a component with visible boundaries does not naturally include elements outside its boundaries in its blur calculations.

I had similar issues with FrontierNav where using a regular filter blur on a background element will make the edges soft by including the background colour in its blur calculations.

In both cases, the solution is the same: overflow the blur and then hide it.

For filter, that's done on the background element itself:

.Parent {
  position: relative;
  overflow: hidden;
}

.Background {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  filter: blur(20px);
  /* ... the rest */
}

For backdrop-filter, that can be done with a pseudo-element:

.Element {
  position: relative;
  overflow: hidden;
}

.Element::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  backdrop-filter: blur(20px);
}

It would be nice if CSS had a way to avoid this hack. But for now, it's simple enough to work around.

Thanks for reading.