The Box Shadow Generator lets you design CSS box shadows visually. Adjust the horizontal and vertical offset, blur, spread, colour, and opacity, watch the shadow update live on a preview box, and copy ready-to-use CSS — no need to remember the property syntax or guess at values.
You can layer several shadows on the same element to build depth, glows, or subtle multi-shadow effects, toggle any shadow to inset, and copy the result as plain CSS or a Tailwind class. Everything happens in your browser.
How to use the box shadow generator
- Set the X and Y offset, blur, and spread for your shadow.
- Pick a colour and adjust the alpha (opacity) slider, and toggle “Inset” for an inner shadow.
- Add more shadows to layer effects, and tweak the preview box colour and corner radius.
- Copy the generated CSS (or Tailwind class) and paste it into your stylesheet.
Understanding the box-shadow values
The CSS box-shadow property takes, in order: the horizontal offset (X), the vertical offset (Y), the blur radius, the spread radius, and the colour — optionally prefixed with “inset”. Positive X moves the shadow right and positive Y moves it down. A larger blur softens the edge, while spread grows or shrinks the shadow before the blur is applied.
Layering multiple shadows
You can apply several shadows to one element by separating them with commas, and this tool lets you add as many as you like. Layering is how designers create realistic depth — for example a soft, wide shadow for ambient light plus a tighter, darker one close to the element — or combine an outer shadow with an inset highlight.
Inset shadows
Adding “inset” draws the shadow inside the element instead of outside, which is useful for pressed buttons, input fields, and inner-glow effects. You can mix inset and outer shadows on the same element for more advanced looks.
Frequently Asked Questions
What does each box-shadow value do?
The values are: X offset, Y offset, blur radius, spread radius, and colour. X and Y move the shadow, blur softens it, spread expands or contracts it, and the colour (with opacity) sets its look. “inset” places the shadow inside the element.
How do I add more than one shadow?
Click “Add shadow” to layer another shadow on the same element. In CSS, multiple shadows are separated by commas, which this tool does for you automatically.
What is an inset shadow?
An inset shadow is drawn inside the element rather than outside it — handy for pressed buttons, text fields, and inner-glow effects. Toggle the “Inset” checkbox to enable it.
Can I get the shadow as a Tailwind class?
Yes. Switch the output to “Tailwind” to get a shadow-[…] arbitrary-value class you can paste straight into your markup.
Does this work for all browsers?
Yes. box-shadow is supported in all modern browsers, so the generated CSS works everywhere without vendor prefixes.