ToolKitColor tools
Box Shadow Generator
Design layered CSS box shadows with live preview and copyable output.
Shadow generator
box-shadow
box-shadow: 1px 1px 2px rgb(0 0 0 / .22);
How to use the Box Shadow Generator
The Box Shadow Generator lets you design CSS box-shadows by adjusting the horizontal and vertical offset, blur, spread and colour, and you can stack multiple shadows together for richer, layered depth. A live preview reflects every change as you make it, so you can dial in exactly the elevation and softness you are aiming for before copying the code.
Front-end developers and UI designers use it to add depth to cards, buttons, modals and dropdowns without writing shadow syntax by hand. Layering several shadows is awkward to do blind in a stylesheet, so being able to see the combined result while you tweak each layer saves a great deal of guesswork and time.
The generated CSS is produced in your browser and copied with a single click, with nothing sent anywhere. No install or account is required, so a finished, polished shadow drops straight into your project and you can return to refine it whenever the design changes.
Frequently asked questions
What CSS does it output?
It outputs a ready-to-use CSS box-shadow property, including support for multiple layered shadows.
Can I create layered shadows?
Yes. You can stack several shadows to build richer depth, with a live preview of the combined result.
Will the output work across browsers?
Yes. The box-shadow property is supported by all modern browsers, so the generated CSS works without vendor prefixes.
Is the generated CSS copyable?
Yes. Click copy and the full box-shadow value is placed on your clipboard.