CSS Box-Shadow Shorthand Property

Box shadows created with CSS are fun and easy, especially when using the shorthand:

box-shadow: 5px 5px 3px 1px rgba(0,0,0,0.4);

The values go in this order: offset-x, offset-y, blur-radius, spread-radius and color.

You can also define inset shadows:

box-shadow: inset 5px 5px 3px 1px rgba(0,0,0,0.4);

And even multiple box shadows:

box-shadow: 5px 5px pink, -5px -5px orange;


Here's the result of the 3 shadows from the above snippets. These look like high-class vomit, but it gives you an idea:

👉 You can see a few more box-shadow examples here.

Browser Support

Can I Use css-boxshadow? Data on support for the css-boxshadow feature across the major browsers from caniuse.com.

  Tweet It

🕵 Search Results

🔎 Searching...