How to Darken Background to Give Focus

Imagine you want to darken the entire background of your page, except for one element. This can act as a great way to focus the user's attention to the most relevant part of the page, such as an important message, a search bar or a CTA.

You can achieve this effect by using only one CSS property: box-shadow.

// This will mask out everything on the page expect for the element
// that has the box shadow.
.input-focused {
  box-shadow: 0 0 0 9999px #000000b0;
}

This works by specifying the spread-radius of the box-shadow. By increasing the spread, you increase the size of the box-shadow. The goal is to make it so big, that it covers the whole page.

See how it starts to cover everything as I increase it's value:

You can also start creating interesting effects by defining an element with no content and changing its position through JavaScript.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Experiment With Box-Shadow

You can use the Codepen below to interact with the element and see live how box-shadow is created :

Edit box-shadow live

• CSS box-shadow property