CSS Box Shadow Generator
Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.
This tool is growing
This tool is currently being prepared.
While we plant it, browse other tools below.
What this tool does
Box shadow generator with a live preview. Adjust the horizontal and vertical offset, the blur, the spread, the color and the opacity, and switch to an inset shadow when you need it. The box-shadow rule appears ready to copy, and everything runs in your browser.
What you can use it for
- Add depth to a card, a button or a modal on a landing page.
- Create a soft drop shadow for a floating menu or a tooltip.
- Build an inset shadow to make an input or a well look recessed.
- Try shadow settings before pasting the rule into your stylesheet or Tailwind theme.
How to use it
- Set the horizontal and vertical offset in pixels.
- Adjust the blur and the spread until the shadow feels right.
- Pick the shadow color and its opacity from 0 to 100.
- Turn on inset for an inner shadow, then copy the box-shadow rule below.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Pairs well with
Other tools people reach for in the same flow.
- CSS Gradient Generator
build CSS gradients
Once you have the base color.
- CSS Border Radius GeneratorNew
build CSS rounded corners
Once you have the base color.
- Color Converter: HEX, RGB, HSL
convert colors between HEX, RGB and HSL
Pick the colors for your gradient.
- Color Palette Generator
generate color palettes
Pick the colors for your gradient.
- Color Contrast Checker (WCAG)
check WCAG color contrast
Once you have the base color.
Related tools
DesignCSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Color Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
Frequently asked questions
What does each box-shadow value mean?
The first two numbers are the horizontal and vertical offset, the third is the blur radius and the fourth is the spread. The color, with its opacity, sets the shadow tint. A larger blur softens the edge; a positive spread grows the shadow, a negative one shrinks it.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, so the box looks carved in rather than lifted up. Turn on the inset option to switch any shadow to that inner style.
How does opacity work here?
The opacity from 0 to 100 is folded into the color as an rgba alpha value, so 25 means a shadow at 25 percent opacity. Lower values give a subtle, realistic shadow; higher values make it bold.
Can I use the generated CSS directly?
Yes. The output is a complete box-shadow declaration you can paste straight into your stylesheet, a CSS variable or a Tailwind arbitrary value. This version builds a single shadow; for stacked layers, copy the rule and add more shadows separated by commas.