CSS shadow generator with elevation examples.

Josh Comeau shows us a handy tool for creating beautiful CSS box shadows. You can pick colors and adjust settings to generate realistic-looking drop shadows. Presets for low, medium, and high elevation add depth and realism to your site’s elements.

The generator outputs CSS custom properties that make it easy to apply the shadows. Josh provides the code to copy and paste right into your CSS. I especially like how the shadows have a subtle color tint that makes them feel integrated with the rest of the design.

UI & UX design inspiration for mobile & web apps.

orbs




Get Fountn

Pro friends get unlimited Figma conversions, bookmarks and collections.

Free Forever

$0

1 Figma conversion/day

5 collections

15 bookmarks

Limited access to new features

Current Plan

Fountn Pro

$6

Unlimited Figma conversions

Unlimited collections

Unlimited bookmarks

Full access to new features

Upgrade to Pro

You've reached your free limit. Upgrade for unlimited access.