Guide•~5 min read

Box-Shadow Image Generator: Create Images with Pure CSS

The CSS box-shadow property was designed for drop shadows and depth effects. But its ability to accept thousands of comma-separated values unlocks something unexpected: full image rendering. Image2CSS is a box-shadow image generator that exploits this capability.

How Box-Shadow Becomes an Image

The box-shadow property follows this syntax for each entry:

offset-x offset-y blur-radius spread-radius color

The key insight: set blur to 0 and spread to the desired pixel size. Each shadow becomes a crisp, solid-coloured square. Position it with X/Y offsets and give it the right colour — now you have one pixel of an image. Repeat this for every pixel in the source image, and the browser paints the complete picture from CSS alone.

A 128×96 pixel image produces 12,288 box-shadow entries. At 200×150, it's 30,000. Each entry is roughly 30 bytes of text. The numbers add up, but for the right use cases, the trade-off is worth it.

Performance: What You Need to Know

Rendering box-shadow images is a CPU-intensive paint operation. Unlike raster images (which the browser GPU-accelerates), box-shadows are computed on the main thread. Here's what that means in practice:

Up to ~10,000 shadows: Smooth on all modern devices. Sub-16ms paint time.

10,000–50,000 shadows: Smooth on desktop. May cause jank on older mobile devices.

50,000–100,000 shadows: Noticeable paint delay (50–200ms). Avoid on mobile.

100,000+ shadows: Slow even on powerful hardware. Use only for static art pieces.

Image2CSS shows a shadow count and file size comparison in real time, so you can find the sweet spot before downloading.

Optimisation Tips for Box-Shadow Art

Start low: Begin at 64–96px resolution and increase only if you need more detail.
Use grayscale: Grayscale images have fewer unique colour values, and browsers may optimise the paint slightly.
Transparent PNGs: Transparent pixels are skipped, reducing shadow count significantly for logos and icons.
B&W threshold: For dramatic effect and minimal file size, use the black-and-white mode. Only two colours means maximum compression.
Avoid animation: Animating an element with thousands of box-shadows will cause frame drops. Use box-shadow images for static elements only.

Browser Support

Multiple box-shadows are supported in all modern browsers: Chrome, Firefox, Safari, Edge, and Opera. The CSS is standards-compliant and doesn't require vendor prefixes. Even Internet Explorer 9+ supports multiple box-shadows (though performance on IE is poor with high shadow counts).

Try the Generator

Ready to generate a box-shadow image? Open the Image2CSS converter, drop in any image, and watch the CSS render in real time. Download the HTML + CSS files and use them anywhere — it's free, private, and requires no account.

Frequently Asked Questions

What is a box-shadow image generator?

A box-shadow image generator converts raster images into CSS box-shadow code. Each pixel becomes one box-shadow entry, and the browser renders the complete image from those shadow values — no image file is needed.

How many box-shadows can a browser handle?

Modern browsers can render up to ~50,000 box-shadows smoothly on desktop. Beyond that, painting time increases noticeably. On mobile, the practical limit is around 20,000–30,000 shadows.