🌑CSS Shadow Palette Generator

Generate layered box-shadow palettes for depth and elevation effects.

Shadow colour:#000000

--shadow-sm

0 1px 2px 0px rgba(0,0,0,0.05)

--shadow-md

0 3px 6px -1px rgba(0,0,0,0.1)

--shadow-lg

0 6px 15px -3px rgba(0,0,0,0.12)

--shadow-xl

0 10px 25px -5px rgba(0,0,0,0.15)

--shadow-2xl

0 25px 50px -12px rgba(0,0,0,0.2)

About CSS Shadow Palette Generator

Generate a complete set of CSS box-shadow values for multiple elevation levels — from subtle card shadows to prominent modal shadows. Customise shadow colour, blur radius, spread, and opacity for each level, then copy the full CSS custom property palette ready to paste into your stylesheet.

How to Use CSS Shadow Palette Generator

1
Choose a shadow colour
Select the shadow colour using the colour picker — black works for neutral shadows, or use a brand hue for coloured effects.
2
Adjust the scale
Modify the blur, spread, and opacity for each elevation level to match your design system.
3
Copy the CSS
Copy the generated CSS custom properties to paste into your project's stylesheet.

Common Use Cases

Building a consistent elevation system for a component library
Generating Tailwind-compatible custom shadow utilities
Creating depth effects for card, modal, and drawer components
Designing neumorphic or glassmorphism UI shadow palettes

Frequently Asked Questions

How many elevation levels does the palette include?

The default palette generates 5 elevation levels (sm, md, lg, xl, 2xl) similar to Tailwind CSS's shadow scale. You can add or remove levels as needed.

Can I use coloured shadows?

Yes — choose any shadow colour including brand colours for coloured glow effects. The tool generates RGBA values with configurable opacity for each level.