apply-multiple-box-shadows-to-single-element.md

Apply Multiple Box Shadows To Single Element

Multiple box-shadows can be applied to the same DOM element. The box-shadow property accepts a comma-separated list of box-shadow directives.

Here is a pretty nasty looking example from the MDN docs:

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Here is a more practical example:

box-shadow: 0 0 0 2px #4caf50,
  0 3px 5px 0 rgba(0,0,0,0.5);

This gives the effect of a solid border with some shadow for depth.

Multiple shadows has pretty robust browser support.

source