R logo

CSS Solid Box Shadows

In effect this is a kind of pseudo-border, which has the advantage that it does not alter the dimensions or layout of the element.

box-shadow: 0 0 0 10px orange;

produces a ‘border’ all round, outside the box, but does not alter the box’s placement:

Grey box with solid orange box-shadow

The box-shadow can be inset, like so

box-shadow: inset 0 0 0 10px orange;

Solid inset box-shadow

Altering the code to

box-shadow: 0 10px 0 0 orange;

gives a bottom ‘border’:

Solid bottom box-shadow

Again, this can be inset (note the negative value)

box-shadow: inset 0 -10px 0 0 orange;

Solid inset bottom box-shadow

Here are some commonly used styles:

Bottom box-shadow0 10px 0 0 violet;
Bottom box-shadow, inside boxinset 0 -10px 0 0 violet;
Top box-shadow0 -10px 0 0 violet;
Top box-shadow, inside boxinset 0 10px 0 0 violet;
Left box-shadow-10px 0 0 0 violet;
Left box-shadow, inside boxinset 10px 0 0 0 violet;
Right box-shadow10px 0 0 0 violet;
Right box-shadow, inside boxinset -10px 0 0 0 violet;

Comma-separating different box-shadow values will produce multiple box-shadows — some can be inset, and some can be deliberately overlaid to produce any number of surrounding solid shadows

Solid indigo and red box-shadows with orange inset box-shadow and violet left inset box-shadow. Note that the content is displayed over the shadow.

Note the trickery with the content colour — I have used

mix-blend-mode: difference;

It alters the colour based on the background — in this case helping to make the text legible over the violet. I’ll write more on this some other time.

Enjoy!