CSS box-shadow generator
Adjust the values to get a ready-to-copy CSS line for a card, button or popup.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter horizontal offset, vertical offset, blur, spread, shadow color (hex) and opacity.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
box-shadow: [inset] offset-x offset-y blur spread rgba(red, green, blue, opacity ÷ 100). The HEX color is converted to 0 to 255 channel values.
Example
Inputs: Horizontal offset = 0 px, Vertical offset = 4 px, Blur = 12 px, Spread = 0 px, Shadow color (HEX) = #000000. Result: CSS code: box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);.
#000000
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
Limits and caveats
- It builds one shadow layer; for more layers, join values with commas in your CSS.
- CSS blur cannot be negative, while offsets and spread can.
Questions about this tool
What is the difference between blur and spread?
Blur softens the shadow edge, while spread grows or shrinks the shadow before it is blurred.
How do I get a soft, natural shadow?
Use black at a low opacity of 10 to 20 percent, a small vertical offset and a larger blur.
What does inset do?
It draws the shadow inside the element instead of outside, so the element looks pressed in.