User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

Drop image here or click to browse PNG, JPG, GIF, SVG, WebP

Max dimension (px) Larger images scaled down to this. Range: 8–256.

Pixel size (px) Size of each CSS pixel block. Range: 1–10.

Color format

Auto (smallest) HEX only RGBA only

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

CSS box-shadow accepts an arbitrary number of shadow layers. Each layer maps to one pixel: horizontal offset x, vertical offset y, zero blur, a spread equal to the pixel size, and the pixel's color. An image of w × h pixels produces up to w ⋅ h shadow declarations. A 64 × 64 source generates up to 4096 entries. Output size grows quadratically with resolution. This tool reads raw RGBA data from a Canvas context, skips fully transparent pixels (α = 0), and selects HEX notation when α = 255 to minimize byte count. Processing runs inside a Web Worker so the interface stays responsive even on images exceeding 10 000 pixels.

Practical uses include pure-CSS sprites for email signatures, novelty portfolio pieces, and demonstrations of browser rendering limits. Note: most browsers degrade rendering performance above roughly 50 000 shadow layers. Keep source dimensions small. This tool approximates the original image under the assumption that each pixel maps to a uniform square of configurable size. Anti-aliased edges and sub-pixel detail are lost.

Formulas

Each opaque pixel at column c and row r with color channels R, G, B, A produces one shadow layer:

shadow = (c ⋅ s)px (r ⋅ s)px 0 spx color(R, G, B, A)

where s = pixel size in CSS pixels (default 1). The color function selects the shorter representation:

{

hex(R, G, B) if A = 255rgba(R, G, B, A255) if 0 < A < 255skip if A = 0

RGB to HEX conversion:

hex(R, G, B) = # + R.toString(16) + G.toString(16) + B.toString(16)

Total pixel count and output estimation:

N = w ⋅ h − N_transparent

where w = image width in pixels, h = image height in pixels, N_transparent = count of fully transparent pixels skipped, s = pixel size multiplier (1 - 10 px), R, G, B = red, green, blue channels (0 - 255), A = alpha channel (0 - 255).

Reference Data

Source Size (px)	Max Shadows	Approx. CSS Size	Browser Render	Recommended Use
16 × 16	256	5 - 8 KB	Instant	Favicons, tiny icons
32 × 32	1 024	20 - 35 KB	Instant	Pixel art, emojis
48 × 48	2 304	45 - 75 KB	Fast	Avatars, badges
64 × 64	4 096	80 - 130 KB	Fast	Thumbnails, sprites
96 × 96	9 216	180 - 300 KB	Moderate lag	Portraits (simple)
128 × 128	16 384	320 - 520 KB	Noticeable lag	Demos, experiments
192 × 192	36 864	700 KB - 1.2 MB	Heavy lag	Stress tests only
256 × 256	65 536	1.3 - 2 MB	May freeze tab	Not recommended
Color Format Comparison
HEX (#RRGGBB)		7 bytes/color	Opaque pixels only (α = 255)
RGBA (rgba(R,G,B,A))		18 - 24 bytes/color	Semi-transparent pixels
Transparent skip		0 bytes	Pixels with α = 0 omitted entirely
box-shadow Syntax per Pixel
Full form		`Xpx Ypx 0 Spx color` - 5 tokens
Zero-offset form		`0 0 0 Spx color` - units omitted on 0

Frequently Asked Questions

Each non-transparent pixel produces one box-shadow entry averaging 25 - 35 bytes. A 64 × 64 image yields up to 4 096 entries, resulting in roughly 100 - 140 KB of CSS. Doubling the dimension quadruples the pixel count and CSS size. Keep source images under 128 pixels per side for practical use.

Pixels with alpha A = 0 are skipped entirely, reducing output size. Pixels with 0 < A < 255 use rgba() notation. Fully opaque pixels (A = 255) use shorter HEX notation. PNG images with transparency are handled correctly. JPEG images have no alpha channel so all pixels are treated as opaque.

The box-shadow property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, rendering performance degrades with large shadow counts. Chrome typically handles up to 50 000 shadows before noticeable lag. Firefox tends to be slightly slower. Internet Explorer 9 supports box-shadow but will struggle with more than a few hundred layers.

The tool caps input at 256 × 256 pixels. Larger images are automatically scaled down while preserving aspect ratio. This limit exists because 65 536 shadow entries produce roughly 1.5 - 2 MB of CSS, which can crash browser rendering. For photographic images, 48 - 64 pixels produces the best balance between recognizability and performance.

Technically yes, but it is inadvisable for anything beyond decorative novelty. A single box-shadow rule with thousands of entries forces the browser to composite each layer independently on every repaint. This consumes significantly more GPU memory than an equivalent PNG or SVG. Use cases include CSS art showcases, email signatures where images are blocked, and technical demonstrations.

Iterating over every pixel and constructing the shadow string involves processing up to 65 536 pixels with string concatenation. On the main thread this would freeze the UI for several seconds on larger images. The Web Worker runs in a separate thread, posting progress updates back to the main thread so the progress bar updates smoothly without blocking user interaction.