Adjust offset, blur, spread, colour and opacity — add layers for realistic depth — and copy production-ready CSS.
box-shadow: 0px 1px 2px 0px rgba(15,23,42,0.06), 0px 8px 24px -4px rgba(15,23,42,0.1);
shadow-[0px_1px_2px_0px_rgba(15,23,42,0.06),0px_8px_24px_-4px_rgba(15,23,42,0.1)]
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on. If you'd rather have it built than fiddle with CSS, talk to us.
A single dark shadow looks flat and dated. Real objects cast a tight, darker shadow close to the surface and a wide, faint one further out. Stacking two or three low-opacity layers produces the soft depth used by modern interfaces.
Define three or four elevation levels — resting cards, raised cards, dropdowns, modals — and reuse them across your product instead of inventing a new shadow for every component.
📖 Read the full guide: CSS Box Shadow Guide: Soft, Layered and Realistic Shadows
Learn and build CSS flexbox layouts visually — every property, live, with CSS and Tailwind output.
Convert between HEX, RGB, HSL, HSV, CMYK and OKLCH — and check WCAG contrast.
Write HTML with Tailwind CSS classes and see it render live — with starter templates.
Static shadows are cheap. Animating large blurred shadows can be expensive; animate opacity or transform of a pseudo-element with the shadow instead.
Paste the class (e.g. shadow-[0_4px_12px_rgba(0,0,0,0.08)]) into your markup. For reuse, add the value to boxShadow in your Tailwind theme.