How to use the Box Shadow Generator
- Start from a preset such as Soft or Layered, or adjust the default shadow.
- Move the sliders for horizontal and vertical offset, blur, spread and opacity, and pick a shadow color. Tick Inset for an inner shadow.
- Add, duplicate or remove layers to combine several shadows, and select a layer to edit it.
- Change the box and background colors to match your design, then press Copy CSS.
Features
- Unlimited shadow layers
- Offset, blur, spread, color, opacity and inset per layer
- Sliders paired with exact number inputs
- Eight presets including layered and neumorphic
- Preview box color, background and corner radius
- Readable multi-line CSS output
The box-shadow syntax
Each shadow is written as [inset] x-offset y-offset blur spread color, and several shadows are separated by commas. For example, box-shadow: 0 10px 30px -12px rgba(39, 45, 110, 0.35) draws a soft shadow that falls below the element.
| Value | What it does | Typical range |
|---|---|---|
| Horizontal offset | Moves the shadow right (positive) or left (negative) | −20 to 20px |
| Vertical offset | Moves the shadow down (positive) or up (negative) | 0 to 40px |
| Blur | Softens the edge; 0 gives a hard shadow | 0 to 60px |
| Spread | Grows (positive) or shrinks (negative) the shadow before blurring | −20 to 10px |
| Color | Usually a dark color with low opacity | 5% to 35% opacity |
| inset | Draws the shadow inside the box | Pressed buttons, wells |
Making shadows look natural
Real light usually comes from above, so most interface shadows have a positive vertical offset and little or no horizontal offset. A negative spread pulls the shadow in so it peeks out mainly below the element, which reads as gentle lift rather than a dark halo. Pure black at high opacity looks heavy; a dark, slightly tinted color at 10–35% opacity looks more like real shade, especially on colored backgrounds.
Layering is the biggest upgrade. Combine a small, tight shadow that defines the edge with a large, very soft one that suggests distance from the surface. The Layered preset stacks five shadows that double in size each time, which gives a smooth, realistic falloff.
Elevation
Design systems use shadows to show how high an element floats: cards rest low with small shadows, menus and popovers sit higher, and dialogs float highest with the largest, softest shadows. Keep a short scale of three to five shadows and reuse them, instead of inventing a new one for every component.
Inset shadows and neumorphism
An inset shadow makes an element look pressed into the page, which suits text inputs, toggles and active buttons. Neumorphism pairs a light shadow on one side with a dark one on the other, on an element the same color as its background, so shapes look softly extruded. It looks striking but has very low contrast, so add clear borders, labels or focus styles to keep controls recognizable.
Performance and alternatives
Shadows are cheap when static, but animating box-shadow on many elements forces repeated repaints. To animate lift on hover, put the shadow on a pseudo-element and animate its opacity instead. For PNG icons or SVG shapes with transparent areas, filter: drop-shadow() follows the visible outline, while box-shadow always follows the rectangular box and its border radius. Fine-tune that radius with the Border Radius Generator.
Frequently asked questions
How do I add more than one shadow?
Separate the shadows with commas. In this generator, press Add layer and edit each layer; the CSS lists all of them in one box-shadow property.
What does spread do?
Spread enlarges or shrinks the shadow before the blur is applied. A negative spread tucks the shadow under the element, which looks softer and more natural.
Why does my shadow look gray and dirty?
Pure black at high opacity tends to look muddy. Lower the opacity to 10–30% and try a dark tint of your background or brand color instead of black.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element’s box and border radius. filter: drop-shadow() follows the actual visible pixels, so it works for transparent PNGs and SVG shapes.
How do I make an inner shadow?
Tick Inset. The shadow is then drawn inside the element’s border, which is useful for input fields and pressed buttons.