Tiny Toolkit

CSS Box Shadow Generator

Compose CSS box shadows visually by setting offset, blur, spread, colour, and inset for each layer. Stack multiple layers to build complex, realistic depth effects that a single shadow cannot achieve. The output is the raw CSS value — ready to paste into any existing stylesheet rule.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

Can I stack multiple shadow layers?
Yes — click "Add Shadow" to add as many layers as you want, each with independent offset, blur, spread, colour, and inset settings.
What does the Inset option do?
An inset shadow renders inside the element's border rather than outside it, creating a pressed or recessed visual effect.
What does the output look like?
The output is the raw box-shadow CSS value — ready to paste into any existing CSS rule.

Related Tools

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.