CSS Box Shadow Generator
Drag the sliders, watch the live preview, and copy the box-shadow code.
Runs entirely in your browser. Nothing you create is uploaded.
How to use this tool
Move the sliders to set the horizontal and vertical offset, the blur radius, and the spread. Pick a shadow color and lower the opacity for a softer look. Toggle the inset option to push the shadow inside the box, which is handy for pressed buttons and inner UI glow effects. The preview updates as you drag, and the box-shadow CSS string is built for you. When it looks right, press Copy CSS and paste it straight into your stylesheet.
How a box shadow works
The CSS box-shadow property layers a colored shape behind (or inside) an element. It takes the offsets, the blur, the spread, and a color in a fixed order.
add the word "inset" at the front for an inner shadow.
Offset X moves the shadow right (positive) or left (negative). Offset Y moves it down (positive) or up (negative). The blur radius softens the edge: zero is a hard edge, larger values fade it out. Spread grows or shrinks the shadow before the blur is applied. The color usually carries an alpha value so the shadow blends with whatever is behind it, which is why this tool exposes an opacity slider that is folded into an rgba color.
A real example
Say you want a gentle card shadow. Set offset X to 0, offset Y to 8, blur to 24, spread to 0, color to a dark slate like #1f2937, and opacity to 15 percent. The tool produces box-shadow: 0px 8px 24px 0px rgba(31, 39, 50, 0.15);. Drop that onto a card and it lifts off the page without looking heavy. Bump opacity to 30 percent and add a little offset X for a more dramatic, directional shadow.
Common questions
What is the difference between blur and spread?
Blur softens the edge of the shadow so it fades out gradually, while spread changes the size of the shadow shape before any blur is applied. Increase spread to make the whole shadow larger, and increase blur to make it fuzzier.
How do I make an inner glow instead of a drop shadow?
Turn on the inset option. That adds the keyword "inset" to the start of the value, so the shadow is painted inside the element instead of behind it. It is the common way to create a pressed or recessed UI look.
Why does the color use rgba instead of hex?
The opacity slider needs an alpha channel, and rgba carries one cleanly. The tool reads your chosen hex color, converts it to red, green and blue values, and appends the opacity as the alpha. You can paste the result directly into CSS.
Can I stack more than one shadow?
Yes. CSS lets you list several shadows separated by commas. This generator builds one shadow at a time, so create each layer, copy it, and join them with commas in your stylesheet for layered depth.
Do these values work in every browser?
The box-shadow property is supported by every modern browser without a vendor prefix, so the code you copy here works in current versions of Chrome, Firefox, Safari and Edge.