CSS & Design Generators
CSS Box Shadow Generator
Adjust offset, blur, spread, color, and opacity visually to build a CSS box-shadow, with a live preview and ready-to-copy code.
🔒 Runs in your browser. Processing behavior depends on the specific tool and its documented implementation.
Ready.
About this css box shadow generator
Box-shadow values are fiddly to tune by hand, four or five numbers that all interact. This tool shows the actual shadow rendering as you adjust each value.
How css box shadow generator works
Your settings are combined into a standard CSS box-shadow property and rendered live, so the preview always matches the code you copy.
Common uses
- Designing a card or button shadow visually
- Fine-tuning shadow blur and spread without trial and error in code
- Building a consistent shadow style for a design system
How to use this tool
- Set X and Y offset, blur, and spread.
- Pick a color and opacity.
- Copy the generated CSS.
What to know before using it
Generates a single-layer box-shadow, for a layered, multiple-shadow effect, you would combine several generated values manually.
Privacy and browser-first processing
Generated entirely in your browser, nothing is logged.
Frequently asked questions
What is the difference between blur and spread?
Blur softens and fades the shadow's edge, spread expands or contracts the shadow's overall size before blurring is applied.