A box shadow generator builds the CSS box-shadow value for you by letting you drag offset, blur, spread, color, and opacity until the shadow looks right, then copying the exact code. The tool below renders a live preview and outputs a ready-to-paste box-shadow line, so you never have to guess pixel values or memorize the property syntax.
What the CSS box-shadow Property Is
The box-shadow property draws one or more shadows around the rectangular box of an HTML element. It does not change the element’s size or layout, because the shadow is painted outside the box flow. A single declaration controls where the shadow sits, how soft its edge is, how far it grows, and what color it uses. The same property can also draw an inner shadow when you add the inset keyword, which is how depressed fields and inset panels are made.
How to Use This Generator
- Set the horizontal and vertical offset to move the shadow left or right and up or down.
- Raise the blur radius to soften the edge, or leave it at zero for a hard shadow.
- Use spread to grow or shrink the whole shadow before it blurs.
- Pick a shadow color and lower the opacity so the shadow reads as light rather than solid black.
- Turn on Inset if you want the shadow inside the element instead of around it.
- Copy the box-shadow line the tool shows and paste it into your CSS rule.
The box-shadow Syntax
Read left to right: offset-x moves the shadow horizontally, offset-y moves it vertically, blur sets how soft the edge is, spread grows or shrinks the shadow, and color sets its tint. Add the inset keyword at the start (box-shadow: inset 0 2px 4px color) to draw the shadow inside the box instead of around it.
Only the two offsets and the color are required. Blur and spread default to zero if you leave them out. Positive offsets push the shadow right and down, while negative offsets push it left and up. A color written as rgba lets you set transparency in the same value, which is why the generator converts your color and opacity into an rgba() string.
| Value | What it does |
|---|---|
| offset-x | Moves the shadow horizontally. Positive goes right, negative goes left. |
| offset-y | Moves the shadow vertically. Positive goes down, negative goes up. |
| blur | Softens the shadow edge. Larger numbers spread the fade over more pixels. Cannot be negative. |
| spread | Grows the shadow with a positive value or shrinks it with a negative value before the blur is applied. |
| color | Sets the shadow tint. Use rgba to control transparency so the shadow looks natural. |
Layering Multiple Shadows
You can stack several shadows in one box-shadow declaration by separating them with commas, and the browser paints them from last to first. Designers use this to build depth that a single shadow cannot, for example a tight dark shadow close to the element plus a wider, fainter one further out. The pattern looks like box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1). Generate each layer separately with this tool, then join them with commas in your stylesheet.
When to Use It
Reach for box-shadow when you want to lift an element off the page, mark a card or button as interactive, outline a focused input, or create the inset look of a pressed control. Because the property is part of every modern browser and needs no images, it is the standard way to add depth in CSS. Pair it with color and spacing choices from the rest of your design so the shadow direction and softness stay consistent across the interface.
Last Thoughts on Generating Box Shadows
The box-shadow property is simple once you can see each value change in real time. Instead of editing numbers blind and reloading, drag the sliders until the depth looks right, then copy the line the generator produces. The rgba conversion is handled for you, so the shadow already carries the transparency that makes it look believable.
Build your shadow above and paste it straight into your stylesheet. For related styling, try our CSS gradient generator, grab tints with the color picker, and convert units with the px to rem converter. See the rest of our free online tools.
Key Takeaways:
- The box-shadow value order is offset-x offset-y blur spread color, with offsets and color required and blur and spread optional.
- Positive offsets push the shadow right and down; negative offsets push it left and up.
- Blur softens the edge and spread resizes the whole shadow before the blur is applied.
- Add the inset keyword to draw the shadow inside the box for a pressed or recessed look.
- Use an rgba color with reduced opacity so the shadow reads as light rather than solid black.
- Stack shadows by separating them with commas to build layered depth in a single declaration.
Frequently Asked Questions (FAQs)
What is the order of values in box-shadow?
The order is offset-x, offset-y, blur radius, spread radius, then color. Only the two offsets and the color are required; blur and spread default to zero if left out. An optional inset keyword goes first to draw the shadow inside the element.
What is the difference between blur and spread?
Blur controls how soft the shadow edge is, fading the shadow over more pixels as the number grows. Spread changes the size of the whole shadow before the blur is applied, growing it with a positive value or shrinking it with a negative one. Blur cannot be negative; spread can.
How do I make an inner shadow in CSS?
Add the inset keyword at the start of the value, for example box-shadow: inset 0 2px 4px rgba(0,0,0,0.3). This paints the shadow inside the element’s box, which is how recessed inputs and pressed buttons get their depth. Tick the Inset box in the generator to see it.
Can a box-shadow have multiple shadows?
Yes. Separate each shadow with a comma inside one box-shadow declaration and the browser paints them from last to first. Layering a tight dark shadow with a wider faint one creates more realistic depth than a single shadow can.
Why does the generator use rgba for the color?
An rgba color carries its own transparency, so the shadow can be a soft tint rather than a solid block. The tool converts your chosen color and opacity into an rgba() value, which is what makes the shadow look natural against the page.
Does box-shadow change the element’s size?
No. The shadow is painted outside the normal layout flow, so it does not affect the element’s width, height, or the position of surrounding elements. This is one reason box-shadow is preferred over border tricks for adding depth.
