Design Tools
CSS Box Shadow Generator
Visually design drop shadows, then copy the ready-to-use CSS. Tune offset, blur, spread, color and inset mode — everything runs locally in your browser with zero uploads.
Controls
Preview
CSS
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);How it works
The generator builds a single box-shadow declaration from five controls: offset-x, offset-y, blur radius, spread radius and color. Offset shifts the shadow horizontally and vertically; blur applies a Gaussian softening to the edges; and spread expands (positive) or contracts (negative) the shadow shape before blurring. The color is converted from hex to an rgba() value with a configurable opacity, which keeps the shadow translucent so it blends with whatever sits behind it. Toggling Inset moves the shadow inside the element border box. The final string follows the CSS order — inset? offsetX offsetY blur spread rgba(...) — so it is valid as-is in any stylesheet or Tailwind arbitrary property.
Use cases
- Elevation for cards, modals and dropdown menus.
- Subtle depth for buttons, avatars and form fields.
- Neumorphic / soft-UI surfaces using low-opacity dual shadows.
- Inset shadows for wells, pressed states and text fields.
- Glow and focus rings around interactive elements.
Troubleshooting
- No visible shadow: check opacity, offsets and blur, and make sure no parent clips it with overflow: hidden.
- Shadow too harsh: lower the opacity and increase the blur.
- Shadow grows instead of shifting: spread is positive — reduce it toward 0 or negative.
- Inset looks reversed: negative offsets push the inner shadow to the opposite side.
- Negative spread hides the shadow: a negative spread contracts the shadow toward the element, so a large negative value can make it vanish entirely. Keep spread in roughly the −10px to −20px range for a tight, crisp edge.
- Large blur feels sluggish: box-shadow blur is rasterized by the compositor and repainted whenever the value changes, so very large or frequently animated shadows cost real rendering time. For hover or entrance animations, animate opacity or transform on a static shadow instead of re-rendering the blur.
FAQ
What do the four values in box-shadow mean?
In order they are: offset-x, offset-y, blur radius and spread radius, followed by a color. Positive x pushes the shadow right and positive y pushes it down; blur softens the edges and spread grows or shrinks the shadow beyond the element box.
What is the difference between blur and spread?
Blur applies a Gaussian softening to the shadow edges without changing its size, while spread expands (positive) or contracts (negative) the shadow shape before blur is applied. A spread of 10px makes a noticeably larger, softer shadow.
How do I create multiple shadows?
box-shadow accepts a comma-separated list, so you can stack several shadows on one element. This is how layered elevation and glow effects are built — paste this tool’s output, then append another shadow before the semicolon.
Why can I not see my shadow?
Common causes: opacity is 0, blur and spread are 0 while offsets are also 0, or the color matches the background. Also make sure the parent container does not clip it with overflow: hidden.
How do I make an inset shadow?
Toggle the Inset switch. This places the shadow inside the element’s border box, which is typically used for pressed buttons, wells and subtle inner depth rather than elevation.