Box Shadow Generator
Create CSS box shadows visually with our free generator. Adjust blur, spread, color, and offset. Copy code with one click.
Preview
Layers ()
Presets
Layer
CSS Code
Method and limits
Each layer serializes X, Y, blur and spread in pixels, followed by RGBA and optional inset. Layers are comma-separated; their order affects overlap.
X, Y and spread accept −50…50; blur 0…100; opacity 0…100%. HEX accepts #RGB or #RRGGBB. An incomplete or invalid layer clears the combined output.
Copied
Copy failed. Select the result and copy it manually.
About Box Shadow Generator
Compose CSS shadows for cards, buttons and containers with separate editable layers and six presets. Rounded and circular previews help compare the same settings.
X=5, Y=5, blur=20, spread=0, black at 25% gives box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
Examples use the stated dimensions and colors; appearance also depends on the destination layout and browser.
Use Cases
How to use
Choose a preset or keep the initial layer.
Select the layer and set signed X/Y offsets.
Set blur and spread, then enter a full HEX color.
Adjust opacity or inset and add or remove layers.
Compare the shape preview and copy the current CSS.
Pro Tips
- Spread expands or contracts the shadow; blur softens its edge. Negative X or Y shifts it left or up. Test a hover treatment in your own stylesheet.
- The generator computes CSS in browser memory and does not save shadow results. The site theme may use localStorage; surrounding page requests remain separate.
- Subtle shadows look more natural (low opacity, slight blur)
- Use multiple shadows for depth
- Inset shadows create pressed effects
Troubleshooting
Check the complete HEX color and numeric bounds; current output is unavailable.
X, Y and spread accept −50…50; blur 0…100; opacity 0…100%. HEX accepts #RGB or #RRGGBB. An incomplete or invalid layer clears the combined output.
Why does 0% opacity hide an inset shadow?
Inset chooses the inside placement; alpha 0 makes that layer transparent. Both settings remain in the CSS.
Frequently Asked Questions
Inset chooses the inside placement; alpha 0 makes that layer transparent. Both settings remain in the CSS.
Add layers and select each to edit it. The copied declaration keeps all layers separated by commas; at least one layer remains.
Spread expands or contracts the shadow size beyond the element.
How soft or hard the shadow edges appear. Higher = softer.