Guide•~7 min read

CSS Background Image Alternative: Pure CSS Images Without External Files

The background-image property is the standard way to add images in CSS. But what if you could render a picture entirely from code, with no image file at all?

How background-image works in CSS

The CSS background-image property lets you set one or more images as the background of an HTML element. The most common syntax is:

Standard background-image usage

.hero {
  background-image: url('hero-photo.jpg');
  background-size: cover;
  background-position: center;
}

This supports JPEG, PNG, WebP, SVG, GIF, and CSS gradients. Combined with background-size, background-position, and background-repeat, you have full control over how the bg image CSS is displayed.

But background-image always needs a source. What happens when you want an image in your CSS stylesheet but don't want to depend on an external file?

The problem with external image files

Extra HTTP requests — each background-image: url() triggers a network fetch.
Broken images — if the file is moved or the CDN goes down, the background silently fails.
Image blocking — some email clients and corporate proxies block external images.
Offline limitations — without caching, background images don't render offline.
CORS complications — cross-origin images can be blocked or require special headers.

The CSS box-shadow alternative

Instead of referencing an image file, you can use the CSS box-shadow property to render a picture pixel-by-pixel from code. Each pixel becomes a shadow entry with a specific position, size, and colour.

Box-shadow pixel rendering

/* No external file — the image IS the code */
.logo {
  width: 1px;
  height: 1px;
  box-shadow:
    0px 0px 0 4px #1a73e8,
    4px 0px 0 4px #4285f4,
    8px 0px 0 4px #669df6,
    0px 4px 0 4px #174ea6,
    4px 4px 0 4px #1967d2,
    8px 4px 0 4px #4285f4;
}

This solves every problem above: zero HTTP requests, no file to break, works in image-blocking environments, and renders offline.

When to use background-image vs box-shadow art

Scenario	Best approach
Full-size hero photos	`background-image`
Responsive backgrounds	`background-image` + `image-set()`
Small logos and icons	Box-shadow CSS or SVG
Email newsletter graphics	Box-shadow CSS
Offline-first web apps	Box-shadow CSS
Creative CSS art	Box-shadow CSS
Pixel art	Box-shadow CSS

Performance: background-image vs box-shadow

File download: CSS background images load as separate HTTP requests with efficient compression. For very small images, HTTP overhead can be disproportionate.

Rendering: Browsers have hardware-accelerated paths for image decoding. Box-shadow rendering is more CPU-intensive. Up to ~50,000 shadows render smoothly on modern devices.

Caching: Image files benefit from CDN caching. Box-shadow CSS is cached as part of the stylesheet — equally cacheable, but inline.

Try it yourself

Want to see how your own image looks as pure CSS? Open Image2CSS and convert a small logo or icon first — the results are often surprisingly crisp, and the CSS can be dramatically smaller than the original file.