CSS Box Shadow Generator
Build the shadow you have in mind without guessing at numbers. Adjust offset, blur, spread, colour and opacity, add more layers for a natural look, and copy a box-shadow declaration that matches the preview exactly.
- Runs in your browser
- No sign-up
- Free to use
Shadow layers
Preview box
How to use CSS Box Shadow Generator
- Start from a preset such as Soft, Layered or Inset.
- Adjust the X and Y offset, blur, spread, colour and opacity of the layer.
- Add layers to build a smoother, more realistic shadow.
- Copy the CSS and apply it to your own element.
CSS Box Shadow Generator features
Multiple layers
Stack up to six shadows in one declaration, each with its own values.
Inset shadows
Switch any layer to an inner shadow for pressed or recessed effects.
Colour with opacity
Pick a colour and set its opacity separately; the code uses rgba() values.
Realistic presets
Soft, medium, large, layered, hard-edged, inset and glow as starting points.
Preview settings
Change the box colour, corner radius and background to match your design.
Clean output
Zero values are written without units and an unused spread is left out.
When to use CSS Box Shadow Generator
- Giving cards and panels a sense of elevation.
- Styling dropdowns, modals and tooltips so they separate from the page.
- Creating focus rings and glow effects.
- Making inputs and wells look recessed with an inset shadow.
CSS Box Shadow Generator FAQ
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour. Positive offsets move the shadow right and down. Blur softens the edge, and spread makes the shadow larger or, with a negative value, smaller than the element. The keyword inset draws the shadow inside the box.
Why use several shadow layers?
A real shadow is darkest and sharpest close to the object and fades as it spreads. One blurred shadow cannot imitate that. A few layers with growing offset and blur and low opacity blend into a result that looks much more natural than a single heavy shadow.
What is the difference between blur and spread?
Blur controls how soft the edge is while keeping the overall size. Spread changes the size of the shadow before blurring. A large blur with a negative spread gives a soft shadow that stays tucked under the element, a popular look for cards.
Does box-shadow affect layout?
No. A shadow takes no space and never moves other elements. It can be clipped, though, when a parent has overflow set to hidden, so leave room around the element.
Is box-shadow expensive to render?
Static shadows are cheap. Animating blur or spread forces the browser to repaint every frame, which can stutter. For hover effects, animate the opacity of a pseudo-element that carries the larger shadow instead.
How is drop-shadow different from box-shadow?
box-shadow follows the rectangular box of the element, including its border radius. The drop-shadow filter follows the visible shape, so it works for transparent PNGs and irregular SVG icons, but it has no spread or inset option.
Designing shadows that look right
Shadows tell the eye how far an element floats above the page. A small, tight shadow says the element is almost flat, such as a card at rest. A large, soft shadow with more offset says it is high up, such as a dialog. Used consistently, a handful of shadow levels gives an interface a clear sense of layering without any borders.
The most common mistake is a shadow that is too dark and too sharp. Real shadows are subtle. Opacity between five and twenty per cent is usually enough, and the vertical offset should be larger than the horizontal one, because light in interfaces is assumed to come from above. Pure black can look dirty on coloured backgrounds; a dark shade of the background colour blends better.
Layering is what separates a convincing shadow from a flat one. The layered preset shows the technique: several shadows, each with double the offset and blur of the one before and a low opacity. The layers near the element provide definition, and the outer ones provide the soft falloff. All of them are written in a single box-shadow property, separated by commas.
Inset shadows reverse the effect and make an element look pressed into the surface, which suits input fields, wells and active button states. Glows are simply shadows without offset in a bright colour, and a shadow with zero blur and a few pixels of spread acts as an outline that follows rounded corners, a handy way to draw focus rings.