CSS Pixel Art + Generator

Officialby Cube Burst Studios

Crisp pixel art with no images: a pure-CSS beating heart, plus a tiny JS helper that turns a text grid into box-shadow sprites.

⬇ Download ZIP 2.2 KB

Category: Web Dev
File: css-pixel-art.zip
Size: 2.2 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #pixel art #javascript #sprites #retro

⚑ Report this

Crisp pixel art with no images: a pure-CSS beating heart, plus a tiny JS helper that turns a text grid into box-shadow sprites.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

pixel.js

// CSS Pixel Art · Cube Burst Studios · CC0
// Turns a text grid into pixel art made of one element's box-shadows (crisp at any size, no images).
//   pixelArt(element, ["..RR..", ".RRRR."], { R: "#ef4c7a" }, 8)
export function pixelArt(el, rows, palette, size = 8) {
	const shadows = [];
	rows.forEach((row, y) => [...row].forEach((ch, x) => {
		if (palette[ch]) shadows.push(`${(x + 1) * size}px ${(y + 1) * size}px 0 ${palette[ch]}`);
	}));
	Object.assign(el.style, { width: `${size}px`, height: `${size}px`, boxShadow: shadows.join(","),
		marginRight: `${rows[0].length * size}px`, marginBottom: `${rows.length * size}px` });
	el.setAttribute("role", "img");
	return el;
}