CSS Box Shadow Generator
Create custom CSS box-shadow declarations with adjustable horizontal and vertical offsets, blur, spread, color, and an optional inset effect. Preview and copy the code instantly.
Run tool
The CSS Box Shadow Generator lets you build box-shadow declarations visually without writing code by hand. Enter numeric values for the horizontal offset (offset-x), vertical offset (offset-y), blur radius, and spread radius. Pick a color using the text input, which accepts hex, rgba, or named colors. Toggle the inset checkbox to create an inner shadow instead of the default outer shadow. The tool appends px units to the four numeric values and adds the inset keyword when enabled. The computation accepts zero for all numeric fields, so you can create a sharp shadow with no blur or spread. After you click Run, the result panel displays the complete CSS declaration, ready to copy into your stylesheet. This generator is useful for web designers and developers who need consistent shadow effects across elements. Use it to experiment with different shadow depths, soften edges, or create layered effects. The output is a single line of CSS that you can paste directly into your project.
Instructions
- Enter a horizontal offset value in pixels (default 2). Negative values shift the shadow left.
- Enter a vertical offset value in pixels (default 2). Negative values shift the shadow up.
- Set the blur radius in pixels (default 5). Higher values create a softer shadow edge.
- Set the spread radius in pixels (default 0). Positive values enlarge the shadow; negative values shrink it.
- Choose a shadow color using the text input (default #00000033). You can use hex, rgba, or named colors.
- Check the Inset box if you want an inner shadow instead of an outer shadow.
- Click Run to generate the CSS box-shadow declaration. Copy the result from the output panel.
Examples
- Set offset-x to 4, offset-y to 4, blur to 10, spread to 2, color to #00000066, and leave inset unchecked. The output is: box-shadow: 4px 4px 10px 2px #00000066;
- Set offset-x to 0, offset-y to 0, blur to 5, spread to 0, color to #ff000080, and check inset. The output is: box-shadow: inset 0px 0px 5px 0px #ff000080;
- Set offset-x to -3, offset-y to -3, blur to 0, spread to 0, color to #333333, and leave inset unchecked. The output is: box-shadow: -3px -3px 0px 0px #333333;
FAQ
What units does the generator use for the numeric values?
All numeric values (offset-x, offset-y, blur, spread) are in pixels (px). The tool appends px automatically to each value in the output declaration.
Can I create an inner shadow with this tool?
Yes. Check the Inset box before clicking Run. The generated declaration will include the inset keyword, creating an inner shadow effect.
What color formats are accepted?
The color input accepts hex values (e.g., #00000033), rgba values (e.g., rgba(0,0,0,0.2)), and named colors (e.g., red). Use any valid CSS color string.
What happens if I set all numeric values to zero?
The tool accepts zero for all fields. The output will be box-shadow: 0px 0px 0px 0px [color]; or box-shadow: inset 0px 0px 0px 0px [color]; if inset is checked.
Can I use negative values for the offsets?
Yes. Negative offset-x shifts the shadow left, and negative offset-y shifts it up. The tool handles negative values correctly in the output.