CSS Box Shadow Generator
Design CSS box shadows with sliders for offset, blur and spread, plus colour, opacity and inset. Start from a preset, preview it on a card, and copy the CSS.
How to create a box shadow
- Start with a preset like Soft card, or choose Custom.
- Adjust offset, blur, spread and opacity with the sliders.
- Copy the CSS and add it to your element, or match the values in Elementor’s Box Shadow settings.
Box shadow values
| Value | Effect |
|---|---|
| Horizontal and vertical offset | Where the light comes from |
| Blur | How soft the edge is |
| Spread | How big the shadow is |
| Opacity | How dark it is |
| Inset | Shadow inside the element |
Design tips
Use one consistent shadow style across your site for cards and buttons. Subtle shadows, around 10 to 20% opacity with a generous blur, feel clean and modern. Heavy, dark shadows tend to look dated. A tinted shadow using your brand colour, as in the example, can look softer than pure black.
Related tools
Round corners with the border radius generator, add backgrounds with the CSS gradient generator, and style buttons with the CSS button generator.
More free tools and guides
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this box shadow generator free?
Yes. It is free with no sign-up and works in your browser.
What does spread do in box-shadow?
It grows or shrinks the shadow before blurring. Negative spread makes a tighter, more natural shadow.
Do box shadows slow down websites?
Normal shadows are fine. Very large blurs on many elements can affect performance on slow phones.
Can I add multiple shadows?
Yes. Separate them with commas in CSS, for example a soft large shadow plus a small sharp one.