CSS box-shadow generator
Drag the sliders or pick a preset — see the shadow on a live card and copy the box-shadow CSS in one click.
Presets
Layers
0px
8px
24px
-8px
#000000
15%
How to use it
- A soft shadow is already on the card — drag any slider (X/Y offset, blur, spread), pick a color and opacity, or tick Inset for an inner shadow. Everything updates live, no button to press.
- Click a preset chip (Soft float, Strong lift, Inset, Neon glow, Double, Neumorphism) to load a ready-made look instantly.
- Add more layers with “+” to stack shadows; each layer is edited independently. Copy the full box-shadow declaration with one click.
Example
Preset
Soft float
box-shadow CSS
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Copy it straight into any selector, e.g. .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. The “Double” preset outputs two comma-separated shadows; “Neumorphism” needs a light background to read.
Scope, limits and common questions
- box-shadow only: no drop-shadow() filter, no text-shadow, and CSS has no gradient shadows — those are out of scope.
- Color comes from the picker plus an opacity slider; we do not parse pasted CSS color strings, so there is nothing to mistype or misread.
- Neumorphism depends on a light surface — on very dark backgrounds its effect may be invisible. That is a property of the style, not a bug.
- Nothing is saved or shared with a parameter in the link: refresh and you are back to the default Soft float. Everything runs in your browser.
Related tools
When you need to go further with color or shadows.