Free CSS Box Shadow Generator Online

What the box-shadow Property Does and How to Tune It

The box-shadow property is how CSS creates the illusion of elevation, and it packs a lot into one line: horizontal offset, vertical offset, blur radius, spread radius, a colour, and optionally the inset keyword. Six values, most of them interacting, which is why editing them blind and reloading the page is such a poor way to work. This generator gives you sliders and a colour picker with a live element showing the result, so you design by eye and copy the declaration when it looks right. UI developers building cards and modals, designers matching an existing design system, and anyone chasing that soft Material or neumorphic look all work this way. Each value does one specific thing. The horizontal offset pushes the shadow right when positive and left when negative; the vertical offset pushes it down or up. Together they imply where the light is coming from, and most interfaces put the light above, which means a positive vertical offset and zero horizontal. The blur radius controls edge softness: zero gives a hard-edged duplicate of the box, and larger values diffuse it outward. Spread grows or shrinks the whole shadow before the blur is applied, so a negative spread pulls a wide blur back in tightly. Colour is usually black with alpha rather than solid black, because a real shadow tints what is behind it rather than blocking it. Add inset and the entire shadow is drawn inside the border box instead of outside. Take a standard card shadow. Set horizontal 0, vertical 4px, blur 12px, spread 0, and colour rgba black at 15 percent opacity. That produces box-shadow: 0 4px 12px rgba(0,0,0,0.15), a shadow sitting slightly below the element with soft edges, enough to lift a card off the page without announcing itself. Now change the opacity to 1 for solid black and the same geometry looks like a printing error. Set the blur to 0 instead and you get a hard offset rectangle, the flat brutalist style. Finally add a second layer, 0 1px 3px rgba(0,0,0,0.1), in front of the first: the tight inner shadow defines the edge while the wide outer one supplies the ambient falloff, which is exactly how the elevation levels in most design systems are built. Real uses. A developer building a dropdown menu needs it to read as floating above the page rather than painted onto it, so a wide low-opacity shadow does that work in one line. A designer implementing pressed button states switches to inset so the surface appears pushed in on click, which gives the tactile feedback a colour change alone cannot. Someone recreating a neumorphic toggle pairs a light shadow on the top-left with a dark one on the bottom-right to fake a raised plastic surface. A team standardising elevation defines four shadow tokens once, from subtle to prominent, and uses only those across the product so depth stays consistent between screens. The mistake almost everyone makes at first is a single high-opacity shadow with a small blur. It reads as dirt rather than depth. Real light scatters, so two or three stacked layers at low opacity, separated by commas, produce a far more convincing result than any single shadow can. Keep the light direction consistent across your whole interface too; mixed directions look accidental. On performance: shadows never affect layout because they paint outside the box, but very large blurs on many elements, or animating the shadow itself on every frame, can cost frames on low-end phones, so animate opacity or transform on a pre-rendered shadow instead. The syntax needs no vendor prefixes in any current browser. Everything runs in your browser and nothing is uploaded.

🔥 Trending Tools