About CSS Box Shadow Generator
CSS Box Shadow Generator turns five controls into one ready-to-paste declaration. Set a horizontal offset, a vertical offset, a blur radius, a colour and an opacity, and the page returns a single box-shadow line ending in a semicolon. The starting values describe a soft shadow sitting four pixels below the element with a twelve-pixel blur.
The opacity is not a separate keyword. It is folded into the colour: the percentage is converted into a two-digit alpha value and appended to the six-digit code the colour picker produced, giving an eight-digit colour. That is the modern way to express a translucent shadow, and it keeps the whole effect inside a single declaration with no separate colour function.
The syntax covered here is the common four-part form of offsets, blur and colour. Spread radius and the inset keyword are both part of box-shadow and neither is exposed, so a shadow that grows beyond the element or one that sits inside it has to be finished by hand. Only one layer is generated as well, so a shadow built from several stacked layers needs a second declaration written manually.
How to use CSS Box Shadow Generator
- 1 Set the horizontal and vertical offsets in pixels; zero and four are filled in.
- 2 Adjust the blur radius to soften or sharpen the edge of the shadow.
- 3 Choose the shadow colour with the picker, then set the opacity as a percentage.
- 4 Copy the generated declaration and paste it into your CSS rule.
Frequently asked questions
Where do I put the generated line?
Anywhere a box-shadow declaration is allowed: inside a rule block, in a stylesheet or in a style attribute. It is a complete declaration including the trailing semicolon, so it can be pasted without editing.
Can I make an inner shadow?
Not from this page. The inset keyword is not exposed by any control, so an inner shadow has to be made by editing the generated line and adding inset in front of the offsets.
Why does the colour have eight digits?
The final two digits are the alpha channel produced from your opacity setting. Six digits identify the colour and two more carry the transparency, which is what lets the shadow be translucent without a separate colour function.
How do I get two shadows on one element?
Generate the first shadow, generate the second with different offsets or a different colour, then join the two values into one comma-separated box-shadow declaration. The page itself produces a single layer.
Free, online, and private
Free to use
CSS Box Shadow Generator is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How CSS Box Shadow Generator behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Inputs | X offset, Y offset, blur radius, a colour and an opacity percentage |
| Defaults | the form opens at 0 px across, 4 px down, 12 px blur, black, and 20 per cent opacity |
| Missing values | only the opacity carries a fallback of 20 inside the run function - the two offsets and the blur fall back to 0, so a cleared field reads as 0 px rather than reverting to the form default |
| Opacity | 0 to 100 in the field, defaulting to 20 |
| Alpha conversion | the opacity percentage is multiplied by 2.55 and rounded, then written as two hexadecimal digits appended to the colour |
| Output shape | a single box-shadow declaration ending in a semicolon, ready to paste into a rule |
Compiled from the implementation of this tool and checked against it by itoolnet.
What CSS Box Shadow Generator does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- There is no spread radius and no inset keyword. Both are part of the box-shadow syntax - spread grows or shrinks the shadow beyond the element box, and inset moves the shadow inside it - and neither can be set here, so those two effects require the generated declaration to be edited by hand afterwards.
- Only one shadow layer is produced. A layered shadow, where several comma-separated shadows build up depth, cannot be created from this page: exactly one declaration is returned, with no control for adding a second layer, adjusting its order or blending the two.
- The opacity is folded into the colour as eight-digit hexadecimal with an alpha channel. That is the modern form and is widely supported, but it is not the older rgba() notation, and the percentage is converted by multiplying by 2.55, which is not exact - a few values land on the nearest of the 256 alpha steps rather than the figure requested.
Tested and documented by itoolnet, the team that builds and maintains this site.