What is box-shadow and how do I make a nice card shadow?
box-shadow is a CSS property that adds a shadow around an element. You give it four numbers (X offset, Y offset, blur, spread), a color and you have a shadow. In practice those numbers are hard to invent in your head, so it helps to see the result live and play with sliders.
Here you pick a preset (Material elevation 1-5, neumorphism, brutalist) or build your own. Every element can have multiple shadows stacked as layers (list on the right), which gives you the deeper Apple-style or Material-style depth.
Hit "Copy" and paste the ready CSS rule into your stylesheet.
How to use
- Click a preset from the gallery (Material 1-5, neumorphism, glow, long shadow) to start from a working effect.
- On the right you see a layer list. Click a layer to edit it. The plus button adds a new one.
- Sliders: X and Y = shadow offset, blur = how soft the edge is, spread = how far it extends. Color plus alpha next to it.
- Toggle inset to make the shadow internal (looks like a recess, used in neumorphism).
- Copy the CSS rule and paste it into your stylesheet or React `style={{}}` prop.
When this helps
Shadows are the most underrated detail that pushes a UI from flat to premium. Three letters of evil in UI are "flat with no depth":
- Product cards in a shop. Material elevation 2-3 looks straight out of Google, no graphics needed.
- Modal / dialog. Stronger shadow (elevation 4-5) lifts the modal off the page, gives you the Apple feel.
- Neumorphic buttons. Two shadows at once, one light top-left, one dark bottom-right, makes the button look embossed.
- Card hover state. Tiny shadow at rest, larger on hover, a `transition: box-shadow 200ms` and you have the classic micro-interaction.
- Brutalist (hard, sharp, no blur). A black 8/8/0/0 shadow nails the retro-cool look.
- Glow / neon. A 0/0/24/4 shadow in a vivid color with alpha makes a glowing call-to-action button.
To pick a shadow color, see color converter. For card corner rounding see border-radius generator.