CSS Box Shadow Generator
Design CSS box shadows visually with live preview and copy-ready code, all in your browser.
Loading CSS Box Shadow Generator… If nothing happens, please enable JavaScript.
The CSS box-shadow property paints a shadow around an element's frame, and it is one of the most important tools for giving a flat web interface a sense of depth and hierarchy. A well-judged shadow tells the user that a card sits above the page, that a button is pressable, that a dropdown is floating over the content beneath it. The property is deceptively rich: a single declaration controls a horizontal offset, a vertical offset, a blur radius, a spread radius, a colour, and whether the shadow falls outside the element or is carved into it as an inset. Getting those values to feel natural by editing numbers blindly is slow, which is exactly why a visual generator helps.
Frequently asked questions
Is anything uploaded when I design a shadow?
What does each box-shadow value control?
What is the difference between blur and spread?
What does the inset option do?
Why does the generated colour use rgba instead of a hex value?
Can I create multiple stacked shadows?
Do these shadows work in all browsers?
How do I make a soft, realistic shadow rather than a harsh one?
About CSS Box Shadow Generator
This generator gives you a live preview box and a slider for each parameter so you can see the effect of every change instantly. The offset values move the shadow left, right, up, or down to suggest a light source. The blur radius softens the edge, with zero producing a hard-edged shadow and larger values a diffuse glow. The spread radius grows or shrinks the shadow before the blur is applied, which is useful for tightening or expanding the footprint. A colour picker and an opacity slider combine into the final shadow colour, and an inset checkbox switches between an outer drop shadow and an inner shadow that makes an element look pressed or recessed.
As you adjust the controls, the tool writes out the exact box-shadow declaration in standard, vendor-prefix-free CSS, ready to copy to your clipboard with one click. The output uses an rgba colour so the opacity is baked in correctly, which is how real-world shadows are almost always written, since pure black at full strength looks heavy and artificial. The preview sits on a checkerboard so you can judge soft and semi-transparent shadows accurately rather than against a single flat colour.
Everything runs locally in your browser, with no uploads, no account, and no tracking, and it keeps working offline once the page has loaded. There is nothing to send anywhere because the whole job is generating a short string of CSS. The result is a fast, tactile way to dial in the precise elevation a component needs and to copy production-ready code without memorising the order of the box-shadow values or hand-tuning rgba alpha by trial and error.
How shadows came and went and came back in web design
Before CSS3, putting a shadow on a box meant images. Designers exported shadow edges as PNG slices and assembled them around an element with extra wrapper divs, a fragile technique that broke whenever the box resized and added several HTTP requests per component. The box-shadow property, standardised as part of the CSS Backgrounds and Borders module, arrived with vendor prefixes around 2009 in the form of -webkit-box-shadow and -moz-box-shadow, and reaching every browser took a few more years until Internet Explorer 9 added support.
Once native shadows were available, the web went through a heavily shadowed phase. Skeuomorphic design, which peaked in the early 2010s and was epitomised by Apple's iOS interfaces of that era, leaned hard on shadows, gradients, and bevels to make on-screen elements imitate physical objects: buttons that looked carved from glass, panels with stitched leather, switches with deep drop shadows. The box-shadow property was central to that look, often stacked several layers deep on a single element.
Then the pendulum swung. Flat design, popularised by Microsoft's Metro language and Apple's own iOS 7 redesign in 2013, stripped shadows away almost entirely in favour of solid colour and clean type. But pure flatness made it hard to tell what was clickable, so a middle path emerged. Google's Material Design reframed shadows not as decoration but as a system of elevation, where the size and softness of a shadow communicates how far an element floats above the surface beneath it. That idea remains the dominant convention today, which is why thinking about shadows in terms of elevation, rather than just darkness, produces interfaces that feel coherent and intuitive.