Shadows

Scale

  • shadow-none
  • shadow-canvas
  • shadow-elevated
  • shadow-popup

Warning

Don’t add a border or ring class; each of these ends with its own border, built to complement the shadow. Adding another doubles the edge, most visibly in light theme.

Legacy

Note

  • Use these shadows alongside border bg-clip-padding.
  • These shadows are not intended for use in new components.
  • shadow-100
  • shadow-200
  • shadow-300
  • shadow-400
  • shadow-500