CSS Box Shadow Generator

In order: horizontal offset, vertical offset, blur, spread and colour. Positive offsets move the shadow right and down; blur softens its edge; spread grows or shrinks it before blurring; inset puts it inside the box instead of outside. The preview updates as you move each slider, so you can see the effect.

Use a low opacity, around 10 to 25 percent, a larger blur and a small vertical offset with no horizontal offset. Two layers, a tight one close to the box and a wide, faint one, look the most natural, the way light falls in real life. Start from the Soft or Card lift preset.

Yes. CSS accepts a comma-separated list of shadows, drawn with the first one on top. This tool writes the list for you as you add layers, up to three. Layered shadows look far more realistic than a single dark one, which can make a design look heavy.

Very large blurs on many elements can cost performance on low-end phones, especially while scrolling or animating. Use them sparingly, keep blur values moderate on repeated elements such as product cards, and avoid animating the shadow itself; animate opacity or a transform instead. Test on a budget phone.

Inset draws the shadow inside the element's border instead of outside, so the box looks pressed in or hollow. It suits input fields, pressed buttons and wells. You can mix inset and normal layers on the same element for a raised edge with a soft inner shade.

Blur softens the shadow's edge, spreading it out gradually. Spread changes the shadow's size before the blur is applied: positive values make it larger than the box, negative values smaller. A negative spread with a larger blur gives a soft shadow that stays tucked under the element.

Pure black at high opacity looks dirty, especially on coloured backgrounds. Lower the opacity, or tint the shadow with a darker version of the background or brand colour. A shadow on an orange card, for example, looks better in a dark orange-brown than in black.

Set both offsets to zero, choose a bright colour such as your brand colour, and use a medium blur with a little spread. The Glow preset is a quick start. Glows suit a main call-to-action button or a highlighted plan, but use them on one thing per screen so they stand out.

Copy the shadow into a :hover rule with a slightly bigger offset and blur, and add a transition on box-shadow or, better for performance, on transform. The card then seems to lift towards the user. Keep the change small; subtle movement feels more polished. Keep it under a quarter second.

No. box-shadow follows the element's box, including rounded corners. The CSS filter drop-shadow() follows the actual shape of transparent images and icons, such as a PNG logo. Use this tool for cards, buttons and panels, and drop-shadow for irregular shapes. Both accept offset, blur and colour values in a similar order.

Yes. box-shadow, including several layers and inset, works in every browser in use today. Email apps vary: some, including versions of Outlook, ignore it. In emails, design so the layout still looks fine when shadows don't appear. A thin border is a reliable fallback in emails where shadows are ignored.

Dark shadows barely show on a dark page. On dark designs, use a lighter, subtle border or a slightly lighter background for raised elements, or a soft coloured glow, instead of relying on black shadows. Check your preview against the real background colour. Subtle borders often work best.

No. The shadow is built and previewed in your browser, and nothing is sent to our servers or stored. Copy or download the CSS before closing the tab. You can try as many shadows as you like without signing up, and there's no limit on use.

Yes. Tap a preset or drag the sliders and watch the preview, then copy the CSS. Fine control is easier with a mouse, but checking a shadow on a phone screen is useful, since most of your visitors will probably see it on a phone anyway.

Yes. It's free with no sign-up and no limit on use. It's one of the free developer tools from Marketiism, along with the gradient and border radius generators and the colour converter. Marketiism builds Marketiism for small businesses. Use it as often as you need, for any project.