CSS Box Shadow Generator
Generate CSS box-shadow effects with live preview
CSS Box Shadow Generator builds the box-shadow property from the values you set — horizontal and vertical offset, blur radius, spread, color, and whether the shadow sits inside or outside the element — so you don't have to memorize the property's argument order.
How to use CSS Box Shadow Generator
- 1
Set the horizontal and vertical offset.
- 2
Set the blur and spread amounts.
- 3
Choose a color and whether the shadow is inset.
- 4
Copy the generated box-shadow CSS.
Everything you need to know about CSS box shadows
What does box-shadow actually control?
A CSS box-shadow adds a shadow effect around an element's edges, controlled by horizontal/vertical offset, blur radius, spread, and color — the combination that gives an element the appearance of floating above the page, or being pressed into it.
When you actually need this
- Cards and modals that need visual separation from the background.
- Buttons with a subtle depth effect on hover or press.
- Focus states for accessibility, drawing the eye to the active element.
Subtlety usually wins
A large, dark shadow reads as heavy-handed in most modern interfaces — a small offset with a soft blur and low opacity is the far more common look in current design systems.
Related Design Tools
Color Palette Generator
Generate beautiful color palettes from a base color
Gradient Generator
Create CSS gradients visually and copy the code
CSS Button Generator
Design CSS buttons with hover effects and copy code
CSS Animation Generator
Generate CSS @keyframe animations visually
CSS Grid Generator
Build CSS Grid layouts visually and export code
Flexbox Generator
Build CSS Flexbox layouts visually and export code
Frequently Asked Questions
What's the difference between blur and spread?
Blur softens and extends the shadow's edges outward in every direction equally; spread grows or shrinks the shadow's base size before blur is applied, letting you make a sharper, larger-footprint shadow.
What does "inset" do?
It flips the shadow to render inside the element's border instead of outside it, producing a pressed-in or recessed look instead of a shadow that appears to float behind the element.
Can I use this for a subtle shadow instead of a dramatic one?
Yes — small offset and blur values with a low-opacity color (like rgba(0,0,0,0.1)) produce the subtle shadows common in modern card and button UI.
Does this tool send my settings to a server?
Yes — they're sent to our servers to build the CSS and the result is returned to you; nothing is stored.
Is this tool free to use?
Yes — completely free, with no signup required.