Soft drop shadow
Static worked example — not your live result.
Input
0 8 24 0 #0f172a @ 0.25
Output
box-shadow: 0px 8px 24px 0px rgba(...);
Generators
CSS Box Shadow Generator
Tune a box shadow visually and copy the CSS. The CSS Box Shadow Generator updates a scoped preview as you adjust offsets, blur, spread, color, opacity, and inset.
How the CSS Box Shadow Generator Works
Step 1
Configure Shadow
Set offsets, blur, spread, color, and opacity.
Step 2
Generate CSS
Create the box-shadow declaration.
Step 3
Copy CSS
Paste into your component styles.
Box Shadow Features
- X/Y offset, blur, and spread
- Color and opacity controls
- Inset or outer shadow
- Live preview
- Copy CSS
Output Details
Input formats
- Options / text inputs
Output formats
- CSS
Supported formats
- CSS
Examples
Frequently Asked Questions
Can I make an inset shadow?
Yes. Enable the inset option.
Is opacity supported?
Yes. Opacity is applied through rgba().
Will generated CSS affect Tool Base?
No. Preview CSS is scoped to the preview element.
Related Design Tools
Explore related Tool Base utilities that pair well with CSS Box Shadow Generator.
CSS Gradient Generator
New
Generate CSS linear and radial gradients with live preview.
Generators
CSS Border Radius Generator
New
Generate CSS border-radius with linked corners.
Generators
Color Palette Generator
New
Generate HEX color palettes with lockable swatches.
Generators
CSS Clamp Generator
New
Generate responsive CSS clamp() expressions.
Generators
Need another utility?
Browse related tools or explore the full Tool Base directory.