Shadows on set sides

box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
  • Box shadow => draws a rectangle with same dimensions as element, moved 2px to the right & 2px to the bottom, blurred 4px (Gaussian blur) & clipped at intersection so it appears behind
  • but there’s also a 4th value: the spread radius

    The spread radius increases or - if negative - decreases the size of the shadow by the amount you specify.

One side:

box-shadow: 0 px 4px -4px black;

Opposite sides:

box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;

Irregular drop shadows

  • filter-effects: e.g. drop-shadow() (cf blur(), grayscale())
  • limited support, but they degrade gracefully!
Dotted border
Cutout corners