box-shadow

A box-shadow is an obvious choice for an inner glow of an element to highlight it. But with some fancy masking, we can use any overlay style we want.

Here’s an example. You can list multiple comma-separated box-shadows, but if you apply a *new* box-shadow, it overrides anything set before. Not true here.

Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.

Don’t run! There is powerful stuff to learn here through interactive demos.

Shadows don’t have to be used for… shadows. Inset shadows can layer over backgrounds and because they are animatable, it’s just another tool for drawing what we want to the page.

David Gerrells has a bunch of fun rendering far too many CSS box-shadows for things that box-shadow was never meant to do. I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I. Because […]