Blog
Every CSS shadow example below is production-ready code you can paste into your stylesheet. Each one includes the exact box-shadow value, what it looks like, and when to use it.
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
The standard card shadow. Clean, minimal, works on white and light gray backgrounds. Use on cards, panels, and any surface that needs slight lift without drawing attention to the shadow itself.
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
Google Material Design resting elevation. Identical to subtle elevation above — Material Design popularized this two-layer pattern. Applied to cards, tiles, and list items at rest.
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
Higher elevation for floating elements. Dialogs, modals, dropdown menus, and popovers. The larger offset and blur signal that this element is above the rest of the page.
box-shadow: 5px 5px 0px #000000;
Zero blur creates a solid, offset duplicate. Popular in brutalist design, retro web aesthetics, and indie game UIs. Pair with thick borders and bold colors. Try colored variants: 5px 5px 0px #3b82f6 for a blue hard shadow.
box-shadow: 0 0 15px rgba(88,166,255,0.6), 0 0 45px rgba(88,166,255,0.3), 0 0 75px rgba(88,166,255,0.1);
Three-layer glow with decreasing opacity at increasing blur. Only works on dark backgrounds — invisible on white. Change the rgb values to match your accent color. Common in gaming UIs, dark-mode dashboards, and cyberpunk aesthetics.
box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
The inset keyword renders shadow inside the element. Standard for input fields (recessed look), pressed button states, and well containers. Combine with a subtle border for definition.
box-shadow: 0 4px 40px rgba(0,0,0,0.07);
Large blur, low opacity, minimal offset. The modern SaaS look — Stripe, Linear, Vercel all use variations of this. The shadow is barely visible but gives the element a floating quality. Works best on white or very light backgrounds.
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.2);
Negative spread (-2px) pulls the shadow inward so it only appears below the element. Standard for sticky navigation bars, fixed headers, and horizontal dividers that need depth without side bleed.
box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.08);
Three layers at increasing distances mimic real-world light. A tight contact shadow, a medium ambient shadow, and a wide environmental shadow. This is the "designer" shadow — subtle but looks three-dimensional.
/* Base */
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: box-shadow 0.25s ease, transform 0.25s ease;
/* :hover */
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
transform: translateY(-4px);
Interactive feedback for clickable cards. The element lifts and its shadow deepens on hover. The transform prevents the shadow from looking disconnected. Use on product cards, blog post cards, and any clickable surface.
background: #3b82f6;
box-shadow: 0 4px 14px rgba(59,130,246,0.4);
The shadow color matches the element background (just with transparency). Creates a soft colored glow beneath buttons, badges, and highlighted elements. Particularly effective on dark backgrounds and in dark mode UIs.
box-shadow: 0 0 0 2px #3b82f6;
Zero offset, zero blur, spread only. Acts as a visual border but does not change element dimensions. Use for focus rings (:focus-visible), selection states, and outlines where you do not want layout to shift. Stack it with other shadows: box-shadow: 0 0 0 2px #3b82f6, 0 4px 12px rgba(0,0,0,0.1);
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.1);
Dual inset shadows — dark on bottom, light on top — create an embossed or beveled look. Use sparingly. Works on buttons and badges where you want a tactile, physical appearance.
box-shadow: 5px 5px 10px rgba(0,0,0,0.15), -5px -5px 10px rgba(255,255,255,0.05);
Shadows in opposite corners simulate an angled light source hitting from both sides. The foundation of neumorphism. The light shadow works on light backgrounds, the dark shadow adds depth. Adjust the white value for your background color.
box-shadow: 0 0 20px rgba(0,0,0,0.15);
Zero offset means the shadow spreads equally in every direction. The simplest way to add uniform glow around an element. Works for modals, focused cards, and highlighted sections. Increase blur for softer, decrease for tighter.
| Style | CSS | Best For |
|---|---|---|
| Subtle lift | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) | Cards, panels |
| Material level 3 | 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) | Modals, dialogs |
| Hard shadow | 5px 5px 0px #000 | Brutalist, retro |
| Neon glow | 0 0 15px rgba(88,166,255,0.6) | Dark themes, gaming UI |
| Inner shadow | inset 0 2px 6px rgba(0,0,0,0.3) | Inputs, pressed buttons |
| Soft diffuse | 0 4px 40px rgba(0,0,0,0.07) | SaaS, modern sites |
| Bottom-only | 0 4px 6px -2px rgba(0,0,0,0.2) | Navbars, headers |
| Layered realistic | 3 layers at increasing distances | Polished design |
| Colored shadow | 0 4px 14px rgba(accent,0.4) | Buttons, highlights |
| All-sides equal | 0 0 20px rgba(0,0,0,0.15) | Modals, featured elements |
Build your own shadow visually — every value adjustable, CSS copied instantly.
Open Box Shadow Generator