No Time Dad

A blog about web development written by a busy dad

Transparent Header Using CSS Backdrop Filter

I first noticed this style of header on the headlessui site. The basic idea is that the header appears transparent and the content scrolling under it is blurred. It’s a cool effect and I was curious how it was done. Below is a screenshot and live example of how this looks, as well as the css and html used to create it. A full example can be found on the examples page.

headlessui_blurred_header

MyHeader
Some example text
<div class="wrapper">
  <header>MyHeader</header>
  <main>...</main>
</div>
.wrapper {
  /* Ensures that the header is only transparent when content passes under it */
  background-color: rgb(46, 52, 64);
}

header {
  top: 0;
  position: sticky;
  background-color: rgb(46, 52, 64, 0.5);
  backdrop-filter: blur(8px);
}

Being a sticky header is what makes this whole thing work. It also involves some trickery with background-colors. The idea is that the header element and its parent element both have the same background-color, but the header element’s background-color has it’s opacity set to 0.5. This makes it so the header appears to not be transparent when content isn’t scrolling under it.

Next, the css backdrop filter property is used to add blur to the elements scrolling under the header. The previous step of adding the opacity is what allows you to see the content as it goes under. The css blur function is one I haven’t used much personally, but I feel like I see it used a lot on the web these days.