CSS Box-Shadow Guide: From Drop Shadows to Image Rendering
The box-shadow property is one of the most versatile tools in CSS. This guide covers everything from basic drop shadows to the advanced technique of rendering full images with nothing but box-shadow values.
Box-Shadow Syntax
The basic syntax of box-shadow is:
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;offset-xHorizontal displacement. Positive values push the shadow right.offset-yVertical displacement. Positive values push the shadow down.blur-radiusOptional. How blurry the shadow is. 0 = perfectly sharp edge.spread-radiusOptional. How much the shadow grows (positive) or shrinks (negative) from the element size.colorShadow colour. Accepts any CSS colour value (hex, rgb, hsl, named colours).insetOptional keyword that makes the shadow render inside the element.Common Shadow Examples
Subtle drop shadow
box-shadow: 0 2px 8px rgba(0,0,0,0.1);Elevated card
box-shadow: 0 4px 20px rgba(0,0,0,0.12);Hard shadow (no blur)
box-shadow: 4px 4px 0 #000;Inner glow
box-shadow: inset 0 0 12px rgba(59,130,246,0.3);Multiple layers
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08);Multiple Box-Shadows
The box-shadow property accepts unlimited comma-separated values. Each value is rendered in order (first = topmost). This is a standard CSS feature supported by all modern browsers since 2012.
Most developers use 2–3 shadows for layered depth effects. But there's no specification limit on the number of shadows — and this is what makes image rendering possible.
From Shadows to Pixels
The creative leap: if you set blur to 0 and spread to a specific size, each shadow becomes a solid, square block of colour. By placing hundreds or thousands of these blocks at precise X/Y positions with the right colours, you can tile them together into a full image.
Each “pixel” in the image becomes a shadow entry like:
3px 7px 0 2px rgb(142,98,65)This renders a 2px × 2px square at position (3, 7) with the colour rgb(142, 98, 65). Thousands of these entries, comma-separated, form the complete image. The HTML is just a single <div> element with one box-shadow property.
Performance Considerations
Box-shadow rendering is a CPU paint operation, not GPU-accelerated like raster images. Key considerations:
- Desktop: Up to ~50,000 shadows render smoothly in all major browsers.
- Mobile: Keep below 20,000–30,000 for smooth performance.
- Animation: Never animate an element with many box-shadows — it will cause severe frame drops.
- Scrolling: Box-shadow images in scrollable containers may cause jank. Use
will-change: transformto promote the element to its own compositing layer.
When to Use Box-Shadow Images
Box-shadow image rendering is not a replacement for <img> tags. It's a specialised technique best for:
- CSS art and creative coding challenges
- Embedding small visuals directly in stylesheets
- Email templates where external images are blocked
- Offline-capable pages and PWAs
- Logos and icons that need to work without HTTP requests
For standard web images, responsive photos, and performance-critical sites, use <img srcset> and modern formats (WebP, AVIF).
Try It Yourself
The best way to understand box-shadow images is to create one. Open Image2CSS, upload any image, and watch the box-shadow CSS generate in real time. Download the result and inspect it in your browser's developer tools to see how each shadow maps to a pixel.