CSS Box Shadow Generator
Use our CSS box shadow generator to fine tune blur, spread, offset, color, and inset. Preview the shadow live and copy the CSS. Runs in your browser.
CSS Box Shadow Generator
#cccccc
#000000
1
0
0
0
0
Preview
CSS Code
What this does
So you want a shadow on a box, a card, a button, or a panel, and you want to dial it in by eye rather than tweak numbers blindly. This builds the CSS. Adjust the offset, blur, spread, colour, and opacity, watch the live preview, and copy the box-shadow code.
How to use it
- Set the horizontal and vertical offset to place the shadow, then use blur and spread to shape it.
- Choose the shadow colour and opacity, and switch between Outset and Inset for an outer or inner shadow.
- Copy the generated CSS with the Copy Code button.
How it works
Every time you change a control, the tool assembles the shadow into a box-shadow value and previews it on the box straight away, so the code and the result always match. It is plain browser code with no library behind it, working instantly as you adjust the sliders.
Understanding box-shadow
A box-shadow is made of a few parts in a set order: the horizontal offset, the vertical offset, the blur radius, the spread radius, and the colour. The two offsets decide which way the shadow falls, positive values push it right and down, negative values pull it left and up. The blur softens its edge, a blur of zero gives a hard edged shadow and a larger blur a softer, more diffuse one. The spread grows or shrinks the shadow before the blur is applied.
There is also a choice between an outset and an inset shadow. The default, outset, sits behind the element and lifts it off the page, which is how cards and buttons get their sense of depth. An inset shadow is drawn inside the element instead, useful for pressed in or recessed effects. The opacity control here simply sets how strong the shadow colour is, through an rgba value.
As with rounded corners, the output carries -webkit- and -moz- prefixes for old browsers. Current browsers need only the plain box-shadow line.
Questions people ask
What do the four numbers mean?
In order: horizontal offset, vertical offset, blur, and spread. The offsets position the shadow, blur softens its edge, and spread makes it larger or smaller.
What is the difference between outset and inset?
An outset shadow sits behind the element and makes it look raised. An inset shadow is drawn inside the element, for a pressed in or recessed look.
How do I make a soft, subtle shadow?
Use a small offset, a larger blur, and a low opacity. That gives a gentle shadow rather than a hard, heavy one.
Do I need the prefixed lines?
No, not for modern browsers. The plain box-shadow line is enough; the prefixed versions are only for very old browsers.
References
- MDN Web Docs. box-shadow. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
- World Wide Web Consortium. CSS Backgrounds and Borders Module Level 3. https://www.w3.org/TR/css-backgrounds-3/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.