Free, private, and instant. Drop an image and get pixel-perfect CSS box-shadow art — no uploads, no server, just HTML & CSS you can download.
Drop an image here or click to browse
Supports JPG, PNG, WebP — up to 20MB
Image2CSS is a free online tool that converts any image into pure CSS code using the box-shadow technique. Unlike traditional image embedding, the resulting CSS recreates your image pixel-by-pixel — meaning a single HTML <div> element can display an entire photograph, illustration, or logo without any image file.
The conversion happens entirely in your browser. Your images are never sent to a server — they stay on your device from start to finish. Upload a photo, adjust the resolution and style settings, preview the result in real-time, and download a ZIP containing the ready-to-use HTML and CSS files.
Whether you are a web developer exploring CSS art, a designer creating lightweight assets, or simply curious about what\'s possible with pure CSS, Image2CSS gives you instant results with zero setup.
A powerful, privacy-first image-to-CSS converter with features the competition doesn't offer.
Every pixel of your image is converted into a CSS box-shadow value. The result is a single HTML element that renders your entire image using nothing but CSS — no <img> tags, no background-image, no external files.
All image processing happens entirely in your browser — your photos are never uploaded to any server and stay on your device. No accounts needed. See our privacy and cookie policies for details on analytics and advertising cookies.
Our canvas-based engine processes images in milliseconds. Adjust resolution, pixel size, and colour settings with real-time preview — see the CSS result update instantly as you tweak.
Download a ZIP containing a standalone index.html and style.css. Open the HTML in any browser and the image renders purely through CSS. Copy-paste the CSS into your own projects.
Convert photos to grayscale or apply a black-and-white threshold for dramatic high-contrast CSS art. Perfect for logos, icons, portraits, and pixel art.
Instantly see how the CSS file size compares to your original image. At lower resolutions, CSS can be significantly smaller than the source image — ideal for lightweight web assets.
Your uploaded image is drawn onto an invisible HTML5 Canvas element. The canvas downsamples the image to your chosen resolution (e.g. 128 pixels wide) while maintaining the original aspect ratio.
The engine reads the RGB colour value and position of every pixel in the downsampled image. If grayscale mode is enabled, the colour is converted to a luminance value. If a black-and-white threshold is set, the pixel is snapped to pure black or pure white.
For each pixel, a box-shadow entry is created: Xpx Ypx 0 Npx rgb(R,G,B). The X and Y offsets position the shadow, the spread radius (N) determines the pixel size, and the colour matches the original. All entries are comma-separated into a single CSS property.
The generated CSS is wrapped in a complete stylesheet with a wrapper element. A matching HTML file references the stylesheet. Download both as a ZIP, open the HTML in a browser, and your image renders entirely from CSS — no image file needed.
Beyond the novelty, there are practical scenarios where CSS images have real advantages.
Create pixel art, portraits, and abstract compositions using nothing but CSS. Showcase your work without any image dependencies.
Convert small icons or logos to CSS for zero HTTP requests. Eliminate render-blocking image loads for critical above-the-fold assets.
Since CSS images are embedded in the stylesheet, they work offline without caching strategies. Perfect for PWAs and service-worker-free offline content.
Some email clients block external images by default. CSS box-shadow art renders inline, bypassing image-blocking for guaranteed visual delivery.
Need to convert an image to HTML code? Image2CSS generates a self-contained HTML + CSS pair you can copy-paste directly into any project — no external image hosting required.
Instead of adding a background image in CSS via background-image: url(), embed the visual directly as box-shadow code. No external file to load, no broken image links.
Image2CSS packs every feature you need for converting images to pure CSS — all free, all private, all instant.
Looking to convert an image to code? Image2CSS turns any picture — JPEG, PNG, WebP, or GIF — into standalone HTML and CSS code. Unlike screenshot-to-markup tools that recreate a page's layout, Image2CSS converts the image itself into pure CSS box-shadow values, producing a code image that renders in any browser without an image file.
The output is a pair of files: an index.html and a style.css. Together, they form a copy-paste HTML component you can drop into any website. This makes Image2CSS a practical image to HTML converter — upload your photo, adjust settings, and download the code.
The traditional way to display images in CSS is the background-image property — background-image: url('photo.jpg'). This is excellent for layout and responsive design, but it still depends on an external image file. If that file breaks, moves, or gets blocked by a content security policy, the background picture CSS rule renders nothing.
Box-shadow CSS art sidesteps this entirely. The visual data lives inside the stylesheet itself — there is no url() to break. If you need a small bg image in CSS that is guaranteed to work in any environment (including restrictive email clients and offline pages), pure CSS rendering is worth considering. For full-size photos or responsive layouts, background-image remains the better choice.
Want to explore this in depth? Read our guide on CSS background image alternatives or learn how to convert any image to HTML code.
Step-by-step guide to converting any image into CSS box-shadow art.
Convert PNG images — logos, icons, and transparent graphics — to pure CSS.
Turn JPEG photos into lightweight CSS art with adjustable resolution.
Generate CSS code from any visual — the reverse-engineering approach.
Create pixel-perfect images using only the CSS box-shadow property.
Deep dive into the box-shadow technique, performance, and browser support.
Convert any picture to self-contained HTML + CSS with no external files.
When and why to use box-shadow art instead of background-image.
Browse real conversions — photos, logos, pixel art, and illustrations.
The CSS box-shadow property was designed for adding shadows to elements — drop shadows, inner glows, and layered depth effects. But its ability to accept multiple comma-separated values with precise positioning unlocks a far more creative use: pixel-level image rendering.
Each shadow value follows the syntax offset-x offset-y blur-radius spread-radius color. By setting blur to 0 and spread to the desired pixel size, each shadow becomes a crisp, solid-coloured square — and thousands of them tile together into a complete image. There are real performance trade-offs, though, and the technique works best for specific use cases.
Covers performance, browser support, email client compatibility, and practical tips for getting clean output.