How to Write One CSS Box Shadow
By Tools Star Hub Editorial Team · Published
A box-shadow is an offset, a blur, a spread, and a color. This page writes one declaration and previews the same numbers. Offsets, blur, and spread are rounded to whole pixels. Opacity becomes the alpha of an rgba() color.
Stacked shadows are not assembled here. Copy more than one declaration and join them in your stylesheet if you need layers.
How to write a shadow
- Set the offset, blur, and spread. Horizontal offset, vertical offset, blur, and spread are separate controls.
- Set the color and the opacity. Opacity stays between 0 and 1 and is written into the rgba color.
- Turn on inset for an inner shadow. Inset does not change the color. It draws the shadow inside the box.
- Copy the CSS. The preview uses that same value. A color the parser rejects yields no declaration. The preview is a sample box, not an element from your page.
Example
The starting shadow
box-shadow: 0 8px 24px 0 rgba(15, 39, 68, 0.2); That is no horizontal offset, 8 pixels down, 24 pixels of blur, no spread, and 20% opacity.
FAQ
- Can I stack several shadows?
- This page writes one. Combine copied values yourself if you need more than one layer.
- Why did a decimal offset become a whole pixel?
- Offsets, blur, and spread are rounded to whole pixels in the copied CSS.
- Does inset change the color?
- No. It only draws the shadow inside the box.
- What if the color is rejected?
- The page does not produce a declaration for a color it cannot parse.
To copy one box-shadow, use the Box Shadow Generator.