How it works
Serialize offsets, blur, spread and an sRGB color with alpha into a CSS box-shadow declaration.
Input definitions
- Horizontal offset (px)
- Enter the value in the labeled unit.
- Vertical offset (px)
- Enter the value in the labeled unit.
- Blur radius (px)
- Enter the value in the labeled unit.
- Spread radius (px)
- Enter the value in the labeled unit.
- Shadow color (#RRGGBB)
- Enter the value in the labeled unit.
- Opacity (0–1)
- Enter the value in the labeled unit.
- Shadow type
- Choose Outer / Inset.
A worked example
- Horizontal offset (px)
- 0
- Vertical offset (px)
- 4
- Blur radius (px)
- 12
- Spread radius (px)
- 0
- Shadow color (#RRGGBB)
- #000000
- Opacity (0–1)
- 0.2
- Shadow type
- Outer
Assumptions & limits
One shadow in pixels. Negative offsets and spread are supported; blur cannot be negative. Output is CSS text, not an uploaded stylesheet.
Sources & review
Maintained by AnsRio. Methods and examples use automated checks; this does not imply independent professional certification.
Method updated 2026-10-17. Content checked against the stated method and examples. Our verification approach.
Common questions
What is the difference between blur and spread?
Blur softens the shadow boundary and must be nonnegative. Spread expands or contracts the shadow before blur; a negative spread can make it smaller.
Does generated CSS or a color result guarantee an accessible design?
No. Test the result in its real layout, including text contrast, browser zoom, focus and responsive behavior. A code generator only covers its documented property or color operation.
How does the CSS box-shadow generator tool work?
Serialize offsets, blur, spread and an sRGB color with alpha into a CSS box-shadow declaration.
What are the assumptions and limits of CSS box-shadow generator?
One shadow in pixels. Negative offsets and spread are supported; blur cannot be negative. Output is CSS text, not an uploaded stylesheet.