Guide•~4 min read

JPG to CSS: Convert JPEG Photos to Pure CSS Art

JPEG is the world's most common photo format. Image2CSS turns any JPEG into CSS box-shadow art — a code-only representation of your photo that renders without any image file.

Why Convert JPG to CSS?

JPEG excels at compressing photographs, but it's still an external file. It requires an HTTP request, takes time to download, and can break if the path changes. Converting a JPEG to CSS embeds the visual directly in your stylesheet — the browser renders it from code, not from a file.

This is particularly useful for small decorative images, thumbnails, and email graphics where external image loading is unreliable or adds unnecessary overhead.

Resolution & File Size for Photos

Photos have more colour complexity than logos or icons, so resolution matters more. Here's a practical guide:

Resolution	Typical CSS Size	Best For
32–64px	1–8 KB	Thumbnails, avatar placeholders
96–128px	15–50 KB	Recognisable portraits, product shots
200–300px	80–200 KB	Detailed art pieces, portfolio work
300+px	200 KB+	Maximum detail (heavy rendering)

Grayscale & Black-and-White Modes

JPEG photos often look stunning in grayscale CSS art. Image2CSS offers two options:

Grayscale:Converts each pixel to its luminance value, producing classic black-and-white photography in CSS. Great for portraits and landscapes.
B&W Threshold:Snaps every pixel to pure black or pure white based on a brightness threshold. Creates dramatic high-contrast art, perfect for silhouettes and graphic effects.

Both modes reduce the number of unique colours in the output, which can sometimes produce smaller CSS files and faster rendering. Check the examples gallery for grayscale and B&W conversions.

JPG vs PNG for CSS Conversion

The main difference is transparency. JPEG doesn't support it, so every pixel in a JPEG generates a box-shadow entry. PNG images with transparent regions skip those pixels, potentially producing smaller CSS. If your source image has no transparency, the output is virtually identical regardless of format. Read more in our PNG to CSS guide.

How to Convert JPG to CSS

Open the Image2CSS converter
Drop your JPEG photo (up to 20 MB)
Set resolution — start with 96–128px for photos
Try grayscale mode for a classic look
Download the HTML + CSS ZIP or copy the CSS

Frequently Asked Questions

Can I convert a JPEG photo to CSS?

Yes. Image2CSS converts any JPEG into CSS box-shadow art. The tool reads each pixel and generates a corresponding box-shadow entry, recreating the photo entirely in CSS.

Will the CSS file be smaller than my JPEG?

At lower resolutions (64–128px), yes — the CSS is typically much smaller. At higher resolutions (200+), the CSS can exceed the JPEG size because each pixel generates approximately 30 bytes of text.