How this works in your browser
The generated declaration combines horizontal and vertical offset, blur radius, spread radius and a colour with an alpha component, which is the full set of values the CSS box-shadow property accepts for a single layer. Spread is applied to the shadow shape before blur, which is why a negative spread paired with a large blur produces a soft shadow tucked beneath an element rather than one extending past it. The live preview renders the actual property rather than an approximation, so what you see is exactly what the copied CSS will produce. Everything runs in your browser.
CSS Box-Shadow Generator vs. typical online calculators
| Feature | CSS Box-Shadow Generator (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses CSS Box-Shadow Generator
Card and panel elevation
Lift content off the background with a believable shadow.
Buttons and interactive states
Add depth that changes subtly on hover or press.
Modals and dropdowns
Signal that an element floats above the rest of the page.
Building a design system
Define a small set of consistent elevation steps.
How to use CSS Box-Shadow Generator
- 1
Open the Box-Shadow Generator
Go to tools.slaytic.com and open the CSS Box-Shadow Generator. No sign-up or account required.
- 2
Set offset and blur
Offset downward with little horizontal shift, and use a generous blur.
- 3
Lower the opacity
Subtle beats heavy. Low opacity with a large blur is what reads as a real shadow.
- 4
Copy the CSS
Take the generated declaration straight into your stylesheet.
Frequently asked questions
What does spread control?
Spread expands or shrinks the shadow shape in all directions before blur is applied.
Can I use a semi-transparent shadow color?
Yes, the opacity slider controls the alpha value of the shadow color.
Does it support multiple stacked shadows?
This version generates a single shadow layer.
Why does my shadow look fake?
Usually because it is too dark and too tightly focused. Real shadows are soft and low in contrast, so a large blur with a low opacity reads as convincing where a hard, heavy shadow reads as a sticker. Pure black also tends to look muddy; a very dark version of the background hue sits better.
Which direction should the shadow fall?
Downward, with little or no horizontal offset. Interfaces conventionally imply a light source above, so a shadow offset straight down looks natural while a sideways one draws attention to itself. Consistency across a page matters more than the exact values.
How do I suggest different elevations?
Scale blur and offset together, keeping opacity low. A card resting on the surface takes a small offset and tight blur; a modal floating above everything takes a much larger blur and offset. Using two or three defined steps rather than arbitrary values per component is what makes a system feel coherent.
What is the difference between blur and spread?
Spread changes the size of the shadow shape before any softening is applied, so a positive value makes it larger than the element and a negative one smaller. Blur then softens the edge. Negative spread with a generous blur is a useful combination for a subtle, tucked-under shadow.