v149 · CSS
Icon Set Comparison
A 16×16 pixel icon displayed at four sizes (16, 32, 64, 128 px) across all four image-rendering values. Switch between icon styles to see where crisp-edges shines versus pixelated or smooth.
Choose an icon style:
Size
auto
smooth
crisp-edges
pixelated
The icon is a 16×16 PNG drawn via canvas. At 16px (native), all modes look identical. At 32px+, the difference between bilinear (auto/smooth) blurring and nearest-neighbour (pixelated) blockiness becomes visible. crisp-edges sits between: it preserves the hard edges of the icon without forcing the pixelated look.
see also
- Canvas Rendering — canvas element with image-rendering
- Pixel Art Gallery — CSS-drawn pixel art
- Sprite Animator — animated pixel art character
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗