How to use this tool
- Adjust offset, blur, spread, color, opacity, and inset using the controls.
- Preview the shadow in real time on the sample card.
- Copy the CSS output and paste it into your stylesheet or component.
About Box Shadow Generator
This tool helps you craft box-shadow values without guessing pixel values or opacity. It is useful when prototyping UI depth, cards, or elevation in design systems.
Common use cases
- Prototyping card and button shadows for design handoff
- Tuning elevation values for a design system
- Experimenting with inset shadows for pressed states
FAQ
- What is this box shadow generator for?
- It generates CSS box-shadow declaration strings from visual controls. You adjust offsets, blur, spread, color, opacity, and inset, then copy the resulting CSS.
- Does this tool send my shadow values anywhere?
- No. All generation runs entirely in your browser. No shadow parameters or colors are transmitted to any server.
- Can I use negative values for offset or spread?
- Yes. Negative offsets move the shadow up or left; negative spread shrinks the shadow. The tool supports all valid CSS box-shadow numeric values.
- Why does my shadow look different in my project?
- Rendering can vary by background color, surrounding elements, and browser. Copy the CSS and tweak values in your environment if the visual result differs.