CSS Box Shadow Generator
Generate box-shadow CSS with live preview. Adjust offset, blur, spread, color and opacity, then copy the code.
Preview
Parameters
Offset X (px)
Offset Y (px)
Blur (px)
Spread (px)
Color
Opacity
Generated CSS
About This Tool
This is a free online CSS box-shadow generator for front-end developers. The CSS box-shadow property adds one or more shadows to an element. Each shadow is defined by horizontal offset (offset-x), vertical offset (offset-y), blur radius, spread radius, and color. The optional "inset" keyword draws the shadow inside the element. This tool lets you adjust all parameters visually with sliders and a color picker, see the result in real time on the preview box, and copy the generated CSS (e.g. box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) into your stylesheet. No installation required; everything runs in your browser.
How to Use
1. Adjust parameters: Use the sliders or number inputs to set Offset X (horizontal shadow position), Offset Y (vertical position), Blur (softness of the shadow edge), and Spread (size expansion or contraction). Choose the shadow color with the color picker or by entering a HEX value (e.g. #000000), and set Opacity (0–1). Check "Inset" if you want an inner shadow.
2. Preview: The sample box above updates in real time as you change any parameter. Use it to judge the effect before copying.
3. Copy code: When satisfied, click "Copy Code" to copy the generated box-shadow CSS to the clipboard, then paste it into your CSS file or inline style (e.g. on a div or card class).