Color & toolsOpen source

Penumbra

An open-source generator for layered, realistic box shadows

About this resource

Penumbra builds box shadows the way light actually falls: several stacked shadows with increasing blur and decreasing opacity, tinted toward the background color instead of pure black. Pick a light angle, elevation level and background, and it outputs a CSS box-shadow value, a Tailwind theme extension and Figma effect styles.

It's for front-end developers and designers who want cards and dialogs to look lifted rather than smudged. The code is MIT licensed and can be self-hosted or run as an npm command-line tool. The caveat: layered shadows with five or more layers cost slightly more to render, so be careful on long scrolling lists on low-end phones.

Highlights

  • 01Shadows tinted toward the background color
  • 02Outputs CSS, Tailwind and Figma effect styles
  • 03Consistent light angle across elevation levels

Tags

Related resources

More in Color & tools
  • An in-browser SVG optimizer with a side-by-side diff before you export

    • svg
    • optimization
    • open source
    Open sourceFree
  • A browser-based mesh gradient editor that exports CSS, SVG and PNG

    • gradients
    • css
    • backgrounds
    FreeFree
  • Rampsmith

    NewFeatured

    Generates accessible 11-step color ramps and checks every pair for contrast

    • color ramps
    • accessibility
    • tokens
    FreemiumFree / $6/mo
Live demo · Kerning Shelf— View template →