Overview
This tool builds box-shadow values you can paste into CSS without hand-writing every number. It gives you control over horizontal and vertical offset, blur radius, spread radius, shadow color, opacity, and inset styling so the result matches the element you are designing. Use it when you need a shadow that feels intentional rather than guessed. The output can be used on cards, menus, dialogs, sticky bars, form fields, and image containers, and the live preview helps you compare subtle shadows against stronger ones before you commit to a style.
Use cases
- Card depth for product gridsCreate a soft shadow for catalog cards so each item separates cleanly from the page background.
- Pressed state for primary buttonsGenerate a tighter shadow with smaller blur and negative spread for a button that looks physically clickable.
- Inner shadows for input groupsBuild inset shadows for text fields, search bars, or segmented panels that need an engraved look.
- Floating panel for popoversTune a wider blur and moderate offset for tooltips, dropdowns, and floating menus that sit above the page.
How it works
- 1
Set the horizontal and vertical offset to place the shadow where you want it.
- 2
Adjust blur and spread to shape the softness and size of the shadow edge.
- 3
Pick a shadow color and opacity that fits the surface and background.
- 4
Switch on inset if you need the shadow to sit inside the element.
- 5
Copy the generated CSS and apply it to the target selector.
Examples
Soft neutral card
Input: x: 0, y: 10px, blur: 30px, spread: -8px, color: rgba(15, 23, 42, 0.14)
Output: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
A gentle shadow for white cards on light interfaces.
Inset field well
Input: x: 0, y: 2px, blur: 6px, spread: 0, color: rgba(0, 0, 0, 0.18), inset: true
Output: box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
A recessed effect for an input or content well.
Compact hover lift
Input: x: 0, y: 6px, blur: 16px, spread: -4px, color: rgba(37, 99, 235, 0.22)
Output: box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
A colored shadow that works well on hovered action tiles.
FAQ
What does the spread value change in the shadow?
Spread changes the size of the shadow before blur is applied. Negative values pull it inward; positive values make the shadow reach farther.
Why does the shadow look too harsh on dark backgrounds?
Usually the color is too opaque or the blur is too small. Lower the opacity and increase blur so the edge falls off more naturally.
When should I use inset instead of a normal shadow?
Use inset when the surface should look pressed in, such as inputs, recessed panels, or disabled-looking containers.
Can I create more than one shadow layer here?
This generator produces one shadow rule at a time. If you want multiple layers, combine separate box-shadow values manually in your CSS.
Why does a negative spread sometimes make the shadow disappear?
A large negative spread can shrink the shadow too much, especially with a small blur. Reduce the negative spread or raise the blur radius.