Add your input
Shadow geometry, color, and transparency settings.
Design bench
CSS box-shadow generator
Create a balanced shadow and copy the exact CSS declaration.
Privacy built inYour work stays with you
Shadow preview
box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);Your work stays private in your browser while you use this tool.
What does css box-shadow generator do?
Compose one CSS box shadow from horizontal and vertical offsets, blur, spread, color, opacity, and optional inset mode, with a live preview and copyable declaration.
- Input
- Shadow geometry, color, and transparency settings.
- Result
- A CSS box-shadow declaration with a live preview.
- Price
- Free
- Account
- Not required
How to use css box-shadow generator
Choose your settings
Create a balanced shadow and copy the exact CSS declaration.
Save or copy
A CSS box-shadow declaration with a live preview.
A practical tip
Soft shadows usually work best with low opacity and a larger blur radius.
When to use css box-shadow generator
Tune low-opacity elevation for a card or floating panel.
Create an inset treatment for a pressed control or recessed surface.
Explore negative spread values that keep a broad blur from looking oversized.
Worked example
A concrete css box-shadow generator example
- Input
- Shadow color #0F172A
- Settings
- x 0px, y 18px, blur 45px, spread -12px, opacity 28%, outset
- Result
- box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);
What to expect
How it works
The color input is converted from HEX to integer RGB channels and combined with the opacity percentage as rgba(). The four geometry sliders are serialized in CSS box-shadow order; enabling inset prefixes the value with the inset keyword.
Know before using
Limits and edge cases
- Only one shadow layer is generated, so layered ambient and key shadows must be assembled manually after copying.
- Controls are bounded to the displayed ranges—offsets -60 to 60px, blur 0 to 100px, and spread -40 to 50px—and the preview cannot represent every target surface or backdrop.
Standards and sources
Common questions
CSS box-shadow generator FAQ
Is css box-shadow generator free to use?
Yes. CSS box-shadow generator is free to use.
Does css box-shadow generator keep my work private?
Yes. Your work stays private while you use the tool — nothing you enter is uploaded.
What does a negative spread value do?
It contracts the shadow's base shape before blur is applied. This can keep a large, soft blur visually close to the element.
Can this generator create multiple comma-separated shadows?
No. It outputs one shadow. Copy several generated values and join them with commas in your stylesheet when you need layers.