What is Image2CSS?
Image2CSS is a free, browser-based tool that converts any image into pure CSS code using the box-shadow technique. Each pixel of your source image becomes a single shadow value on one HTML element — the browser reconstructs the picture entirely from CSS, with no <img> tag, no background-image, and no external files.
The idea sounds ridiculous the first time you hear it, and that's part of the fun. But it's also genuinely useful: a logo or icon rendered in pure CSS has zero HTTP requests, works offline by default, and can't be blocked by image-blocking email clients or corporate firewalls. It's a weird corner of web development that deserves better tooling than a handful of abandoned CodePen experiments.
Why I built it
Image2CSS started as a weekend experiment. I wanted to see if the box-shadow trick could be made practical enough for real use — not just a novelty. Most existing converters are hardcoded to one resolution, produce output that's unreadable, or quietly send your photos to a backend server.
So I built the tool I wanted: everything runs in your browser, you can dial the resolution from 32 to 256 pixels wide, preview the output live, toggle grayscale or B&W threshold modes, and download a clean index.html + style.css pair you can open anywhere.
How it works (in one paragraph)
The app loads your image into an HTML5 canvas, downsamples it to the target resolution, and walks every pixel. For each pixel it emits a single box-shadow entry with an X/Y offset, zero blur, a spread equal to the pixel size, and the pixel's colour. A single HTML element with a 1×1 px footprint carries the entire list — sometimes tens of thousands of shadows. The browser paints each shadow as a flat square, tiling them into a coherent image. There's a deeper technical write-up on the Box-Shadow Image Art guide.
Principles
Client-side only
Your images never leave your device. There is no upload endpoint, no cloud storage, no backend at all.
Free forever
No accounts, no paywalls, no watermarks. The site runs on a small hosting bill and ads from Google AdSense — that's it.
Honest trade-offs
Box-shadow images are cool but they aren't a silver bullet. The site is upfront about when the technique makes sense (small icons, logos, creative experiments) and when it doesn't (full photos at 4K).
Who built this
Image2CSS is a small indie project by an independent developer. It's not affiliated with any company, venture, or training programme — just a web developer who thought the box-shadow trick deserved a modern, well-built tool.
If you find the site useful, have a bug to report, or just want to say hi, you're welcome to get in touch .
Tech stack
Image2CSS is built with Next.js and React, uses the HTML5 Canvas API for all image processing, and is shipped as a static site — which is why it loads instantly and keeps running even if the server goes away. Source is closed for now, but the generated CSS is yours to keep.