PNG to CSS Converter
Convert images into pure CSS code using box-shadows. Create single-element pixel art without external assets. Optimize specifically for web performance.
Click to Upload or Drag & Drop Image
Recommended: Small PNGs (under 128px)
Reduces image resolution to prevent browser crashes.
About
This tool transforms raster images into a single HTML element styled purely with CSS. By manipulating the box-shadow property, we can replicate every pixel of an image as a shadow offset from a 1x1 pixel origin. This technique is widely used for CSS Pixel Art, allowing icons and graphics to exist without external HTTP requests or Base64 strings.
The mathematical principle relies on the Cartesian coordinate system. The original element acts as the origin 00. Each pixel at position xy is rendered as a shadow defined by x ⋅ s, y ⋅ s, where s is the pixel scale size.
Warning: This method generates heavy CSS payloads. It is strictly recommended to downsample images to low resolutions (e.g., 64x64) to avoid rendering performance issues.
Formulas
The CSS generator iterates through the image matrix I. For every pixel p with coordinates xy and color C, the shadow definition S is calculated as:
The final property is a summation of all valid pixels (where a > 0):
Where n is the total number of non-transparent pixels.
Reference Data
| Dimension (px) | Pixel Count | Approx CSS Size (Minified) | Rendering Cost |
|---|---|---|---|
| 16 × 16 | 256 | ~4 KB | Negligible |
| 32 × 32 | 1,024 | ~18 KB | Low |
| 64 × 64 | 4,096 | ~75 KB | Moderate |
| 128 × 128 | 16,384 | ~300 KB | High (Lag likely) |
| 256 × 256 | 65,536 | ~1.2 MB | Extreme (Do not use) |