Output
Output will appear here
Click in the output to select all text
CSS Box Shadow Generator
Related tools
CSS Color Gradient Generator
Generate linear and radial CSS gradient code with multiple color stops and angle.
GradientCss gradient
Interactive Color Picker & Multi-Format Inspector
Visual color picker showing real-time HEX, RGB, HSL, HSV, and CMYK formats.
Color pickerColor inspect
CSS Formatter & Beautifier
Beautify and indent CSS rules, properties, and media queries.
Css formatterBeautify css
This CSS Box Shadow Generator builds a valid box-shadow declaration from horizontal and vertical offset, blur radius, spread radius, color, and an inset toggle, so you can dial in a shadow visually instead of guessing pixel values. Adjust any control and the CSS updates instantly, ready to copy straight into a stylesheet or component. It's useful for cards, buttons, modals, and any element that needs depth without reaching for a design tool. Everything runs locally in your browser. Scroll down to adjust the controls and copy the generated CSS.
Features
- Full control over offset-x, offset-y, blur, spread, and color
- Inset shadow toggle
- Instant CSS output as you adjust values
- One-click copy of the box-shadow declaration
- Works entirely client-side
Why use this css box shadow generator?
- Faster than hand-tuning shadow values by trial and error
- Produces valid, ready-to-paste CSS
- Fully private — nothing is uploaded
- Free with unlimited use
Frequently asked questions
What do offset-x and offset-y control?
offset-x moves the shadow horizontally and offset-y moves it vertically; positive values shift right/down, negative values shift left/up.
What's the difference between blur and spread?
Blur controls how soft/feathered the shadow's edge is; spread expands or contracts the shadow's size in every direction before blurring.
What does the inset option do?
Inset draws the shadow inside the element's border instead of outside it, useful for pressed/inset button or input effects.
Can I use rgba or hex colors?
Yes, the color field accepts standard CSS color values; for semi-transparent shadows use an rgba() or hsla() value.
Can I stack multiple shadows?
This tool generates one shadow layer at a time; for multiple layered shadows, comma-separate multiple box-shadow values in your CSS manually.