CSS Box Shadow Generator
Design a CSS box-shadow with live sliders, presets and a preview, then copy the ready-to-paste rule.
100% private — everything runs in your browser
How to Use
- 1
Drag the sliders to set offsets, blur, spread, colour and opacity.
- 2
Try a preset, or paste an existing box-shadow value to keep editing it.
- 3
Copy the CSS rule and paste it into your stylesheet.
Examples
Elevated card
Input
0 8px 24px -4px rgba(15,23,42,.18)Output
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);Neon glow
Input
0 0 24px 2px rgba(99,102,241,.45)Output
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);FAQ
What does spread do?
Spread grows or shrinks the shadow in every direction before blurring. Negative values tighten it.
Why does an inset shadow look different?
An inset shadow is drawn inside the element, so it reads as a pressed or recessed surface.
Can I use the result with Tailwind CSS?
Yes. Paste the copied value into an arbitrary property such as shadow-[…] or into a custom property.
Related Tools
Border Radius GeneratorShape four corners independently, link them together and copy the CSS border-radius rule.Gradient GeneratorCreate CSS linear and radial gradients visually and copy the CSS code.CSS Color GeneratorTurn a base color into a 10-step shade scale and export it as CSS variables.JSON FormatterFormat, beautify, minify and validate JSON instantly — right in your browser.JSON ValidatorValidate JSON instantly and find syntax errors with the exact line, column and position — right in your browser.Base64 Encoder/DecoderEncode text to Base64 and decode Base64 back to text with full Unicode and emoji support — 100% in your browser.