Box Shadow Generator
Design ToolsDesign CSS box shadows visually.
What is Box Shadow Generator?
Box Shadow Generator designs CSS box shadows visually and outputs the code.
How to use Box Shadow Generator
- 1 Adjust the offset, blur, spread, and colour.
- 2 Preview the shadow.
- 3 Copy the CSS.
Supported formats and limits
- Output: CSS box-shadow code
- Runs in your browser
Common uses
- Design a card or button shadow visually.
- Copy the generated box-shadow value.
- Match a shadow across components.
Things to know
- It generates one box-shadow declaration.
- Heavy shadows can affect perceived performance if overused.
Privacy and file handling
Everything runs in your browser.
Frequently asked questions
What does spread do?
Spread expands or shrinks the shadow before it is blurred, changing how large it appears.
What controls does the tool provide?
Offset, blur, spread, colour and inset, with a live preview.
What does it output?
A ready-to-paste CSS box-shadow rule.
Is anything uploaded?
No. It runs in your browser.
Related tools
CSS Gradient Generator
Create beautiful CSS gradients with ease.
Design Tools
Open tool
Color Palette Generator
Build harmonious colour palettes from a base colour.
Design Tools
Open tool
CSS Minifier
Compress CSS by removing comments and redundant whitespace.
Developer Tools
Open tool
Image to Base64
Convert images into Base64 data URIs and back.
Image Tools
Open tool