How can I make a CSS glass/blur effect work for an overlay?

Cross-browser compatibility

Before we move on, let's ensure we're all on the same page — or rather, the same browser. Not all browsers are created equal, and it's vital to design with this in mind. Notably, Firefox and IE pose more challenges with the backdrop-filter property. You can always check caniuse.com for the latest on browser support.

For our dear friends who use other browsers, we can use an SVG filter. It's slightly more heavyweight, but hey, love is all about compromise. Here's a sample SVG filter:

/* The old school way of adding a glass effect */
<svg>
  <filter id="blur-effect" x="0" y="0" width="100%" height="100%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>


To implement it in CSS:

/* No browser left behind! */
.glass-effect {
  filter: url(#blur-effect);
  background: rgba(255, 255, 255, 0.5); /* Still want that transparency */
}


Optimizations and best practices

The art of pre-processing

If you like living on the edge of cross-browser compatibility, consider using pre-blurred images. You could automate this process or jump into your favorite image editor.

The magic shadow box

Adding a box-shadow can provide depth and make your overlay pop like it's 3D.

/* Adding some depth, because why not? */
.glass-effect {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


Full viewport coverage

Want your overlay to don a superhero cape and cover the whole viewport? Say no more:

/* Your overlay can cover more ground than Superman */
.glass-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


Handling tricky situations

The juggling act

Overlaying multiple blurs can be as tricky as a juggling act. Monitor your page for any performance drops - you don't want to be the cause of a browser's slow day.

The golden rule of simplicity

Simplicity is golden. A simple codebase is easier to maintain and debug, saving you countless hours down the road.

Direct blur caution

Do you want your text to look like it had one too many at the pub? Neither do we. Avoid using filter: blur(), as it will blur everything, including text.

Use-case scenarios

Drawing attention (modal dialogs)

Modal dialog boxes can dramatically focus user attention. The blurred background subtly de-emphasizes the rest of the UI.

/* Creating intense focus with a blur - ironic, isn't it? */
.modal-overlay {
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.4);
}


Subtle De-emphasis (background emphasis)

Add subtle emphasis to UI elements with this trick. Dim the background to bring out your bold, interactive elements!

/* Making interactive elements pop */
.menu-active .page-background {
  backdrop-filter: blur(3px);
}


Create breathtaking designs

The glass effect creates a visually pleasing design element for dynamic or complex backgrounds.