Shadow effects
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