Free CSS Box Shadow Generator
Generate CSS box-shadow rules visually with live preview. Control every parameter and copy the result instantly.
Free, no signup — adjust the sliders to configure your shadow, then click Generate to see the preview and copy the CSS rule.
Editing is a pain in the ass, right?
That's why we're building Cubix. No more editing hell.
AI Video Editor
Drop your footage, tell it what you want. Cubix cuts, captions, color grades, and exports — fully on its own. No timeline. No manual work. Just results.
Cinematic Screen Recorder
Hit record on Windows. Auto-zoom, cinematic backgrounds, and studio-quality audio kick in automatically — your screen recording looks edited before you've touched a thing.
How to Generate a Box Shadow
Design any drop or inset shadow and grab the CSS in three steps.
Adjust the Sliders
Set X/Y offset, blur radius, spread, color, opacity, and toggle inset mode.
Watch the Live Preview
See the shadow render on a real element in real time so you can fine-tune the look.
Copy the CSS
Click to copy the complete box-shadow rule, ready to paste into your stylesheet.
box-shadow: 0 10px 25px rgba(0,0,0,.45);
Live Preview
See exactly how your box shadow will look on a real element before copying the CSS into your project.
Full Control
Control X offset, Y offset, blur radius, spread radius, shadow color, opacity, and inset mode independently.
Copy Instantly
Copy the complete box-shadow CSS rule to your clipboard with one click, ready to paste into your stylesheet.
Frequently Asked Questions
What is CSS box-shadow?
The box-shadow CSS property adds shadow effects around an element's frame. The syntax is box-shadow: x-offset y-offset blur spread color. Optionally prefix with inset for inner shadows.
What does the spread radius do?
Spread radius expands or contracts the shadow beyond the blur. A positive value makes the shadow larger than the element; a negative value shrinks it. Setting spread to 0 makes it the same size as the element.
What is an inset shadow?
An inset shadow appears inside the element's border, creating a sunken or embossed effect. Use it for pressed button states, input field highlights, or depth effects on cards.
How do I make a soft, subtle shadow?
Use small X and Y offsets, a larger blur radius, a spread of 0 or slightly negative, and a low-opacity color (for example rgba(0,0,0,0.1)). Drag the sliders and watch the live preview to dial it in.
Is the CSS Box Shadow Generator free?
Yes. It is completely free with no signup — adjust the controls, preview the shadow, and copy the box-shadow rule.
Related CSS & design tools
Round corners, build flex layouts, generate gradients, and convert colors.