CSS Box Shadow Generator
Visually generate CSS box-shadow properties with sliders. See a live preview and copy the CSS code.
CSS
Features
Slider controls
Color picker
Inset toggle
Multiple layers
Live preview & CSS code
How to Use
1. Drag the sliders for offset X, offset Y, blur, and spread.
2. Pick a colour with the colour picker.
3. Toggle Inset for inner shadow.
4. Copy the generated CSS code.
Frequently Asked Questions
What is box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame.
Related Tools
CSS Gradient Generator
Generate CSS linear, radial, and conic gradients visually. Add multiple color st...
CSS Border Radius Generator
Generate CSS border-radius visually with individual corner controls and live pre...
CSS Flexbox Playground
Learn and experiment with CSS Flexbox visually. Control all container and item p...
CSS Grid Generator
Build CSS Grid layouts visually. Set rows, columns, gaps, and merge cells with l...