Box Shadow Generator

Build CSS box-shadow with sliders and preview on a live element

What is it and how does it work?

A box-shadow generator lets you design a CSS shadow with sliders and a live preview, then copy the exact box-shadow value into your stylesheet. CSS shadows are controlled by a handful of numbers — horizontal and vertical offset, blur radius, spread, and a colour — and the relationship between them is hard to picture from the code alone. Dragging a slider and watching the shadow change on a sample element is far faster than editing numbers blind and reloading to see the result.

Good shadows are what give a flat interface a sense of depth and hierarchy: a subtle, soft shadow lifts a card off the page, while a tighter, darker one suggests a button you can press. The trick most people miss is that realistic depth comes from soft, low-opacity shadows rather than heavy black ones — and the generator makes it easy to dial in that softness by eye. It also supports inset shadows for inner depth. This tool produces standards-based CSS in your browser, ready to paste onto buttons, cards, modals and inputs.

Common use cases

• Lifting a card: design a soft shadow that makes a card or panel appear raised above the background.
• Styling a button: create a tighter shadow for a clickable element, and an inset shadow for a pressed state.
• Matching a design spec: dial in offset, blur and colour to reproduce a shadow from a mockup and copy the CSS.

Frequently asked questions

What do the box-shadow values mean?

In order they are: horizontal offset, vertical offset, blur radius, spread radius, and colour. Offsets move the shadow, blur softens its edge, spread grows or shrinks it, and the colour (usually with low opacity) sets its strength. An optional "inset" keyword draws the shadow inside the element.

How do I make a shadow look realistic?

Use a soft blur and a low-opacity colour rather than solid black, and keep the vertical offset larger than the horizontal to mimic light from above. Subtle, soft shadows read as natural depth; heavy dark ones look artificial.

What is an inset shadow?

Adding the inset keyword draws the shadow inside the element instead of outside, creating an inner, recessed look — useful for pressed buttons, input fields or carved effects. The same offset, blur and spread values apply, just facing inward.

Can I layer multiple shadows?

Yes. CSS lets you stack several box-shadows on one element by separating them with commas, which is how realistic depth is often built — combining a tight, darker shadow with a wider, softer one. The generated value can hold multiple layers.

CSS

Border Radius Generator · Flexbox Generator · CSS Grid Generator · Text Shadow Generator · CSS Animation Generator · CSS Filter Generator