CSS Box Shadow Generator
Create CSS box-shadow effects with offset, blur, spread, color and opacity control, multiple layers, inset and live preview. No sign-up.
What this tool does
It generates CSS box-shadow code with visual controls and a live preview: you adjust the offset, blur, spread, color and opacity, stack several shadow layers, switch on inset mode, and copy the CSS ready to paste. Instead of typing numbers blind and reloading, you see the effect while you move it.
How to read a box-shadow
The property has five parts, always in this order:
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.15);
/* X Y blur spread color */
- X (horizontal offset) — moves the shadow right (positive) or left (negative).
- Y (vertical offset) — down (positive) or up (negative).
- Blur — how much the edge is softened. 0 gives a hard-edged shadow; high values, a diffuse cloud.
- Spread — grows (positive) or shrinks (negative) the shadow before the blur is applied.
- Color — the tone, almost always with some transparency.
How to use it
- Move the X, Y, blur and spread sliders while watching the preview.
- Adjust the color and its opacity.
- Add layers if you want a richer shadow (see below).
- Switch on
insetif you are after an inner shadow. - Copy the CSS.
The secret behind shadows that look good: several layers
The difference between a shadow that looks like a template and one that looks like a finished product is almost never the color: it is how many shadows there are.
A single strong shadow looks hard and flat. Real shadows are soft and fall off in layers: there is a near part that is somewhat defined, and a far part that is very diffuse. Reproducing that in CSS means stacking two or three shadows with increasing blur and decreasing opacity:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 4px 8px rgba(0, 0, 0, 0.06),
0 16px 24px rgba(0, 0, 0, 0.05);
Each layer is larger, softer and fainter than the one before. The result has a depth a single shadow never achieves. The tool lets you add layers precisely for this.
Color with opacity, not grey
A common mistake is using pure black at 100%. Over a colored background, that shadow reads as a stain stuck on top. The fix is black at low opacity (rgba(0,0,0,0.15)), which lets the background show through the shadow and integrates it.
Careful interfaces go one step further: the shadow takes a tint from the background color itself instead of neutral grey. A card on a bluish background casts a slightly blue-dark shadow, not a grey one. The eye reads it as “right” without knowing why.
Outer versus inner shadow (inset)
By default the shadow is outer: it projects outward and makes the element look raised off the page. That is what gives relief to cards, buttons and menus.
With the inset keyword, the shadow is drawn inside the element, giving a recessed feel:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
It is used for form fields (they look “set into” the page), buttons in a pressed state, and inward relief effects.
A useful technical detail
box-shadow takes up no space in layout: it is painted outside the flow, so it does not push neighboring elements around or change the size of the box, unlike a border. You can add and remove shadows without anything around them shifting.
The exception worth knowing: box-shadow follows the element’s rectangular box (including its border-radius), but not the actual shape of an image with transparency. To make the shadow follow the cut-out outline of a PNG or an icon, use filter: drop-shadow() instead of box-shadow.
Frequently asked questions
What do the box-shadow values mean?
A box-shadow has, in order, the horizontal offset (X), the vertical offset (Y), the blur, the spread and the colour. X and Y move the shadow relative to the element; blur sets how soft the edge is; spread grows or shrinks the shadow before blurring; and the colour, usually with some transparency, gives it its tone. The tool lets you adjust each one with a live preview.
What is an inset shadow?
The inset keyword turns the shadow from outer to inner: instead of projecting outward, it is drawn inside the element, giving a sunken or inward-depth feel. It is used for form fields, pressed buttons and embossed effects. Without inset, the shadow is outer, which is the usual case for lifting cards and buttons.
How do I make a more realistic shadow?
The trick is to stack several shadow layers rather than using one heavy one. Real shadows are soft and fade gradually, so combining two or three shadows with different blurs and opacities —one close and sharp, another far and diffuse— produces a far more natural result than a single hard shadow. The tool supports multiple layers for this.
Why use a colour with opacity instead of grey?
Because a 100% black shadow looks hard and artificial on any coloured background. Using black with opacity (for instance rgba with a low alpha) lets the background show through the shadow, blending it in. In polished interfaces, the shadow often takes a tint of the background colour itself, rather than a neutral grey, so it feels part of the scene.
Does box-shadow affect size or layout?
No. The shadow is painted outside the layout flow: it takes up no space and does not push neighbouring elements, unlike a border. That is why you can add or remove shadows without anything shifting. If you need an effect that follows the element's clipped shape (say with border-radius and images), filter drop-shadow is sometimes used instead.
Reviews & ratings
No reviews yet. Be the first to leave one!
Related tools
Others from the catalogue that pair well with this one.