CSS-only barcodes

Type 12 digits to generate a correct checksum automatically, or paste all 13 digits to validate an existing EAN-13 code.

The barcode itself is drawn entirely with a single CSS linear gradient.

SymbologyFull codeCheck digit
EAN-135901234123457(computed) 7

The rendered pattern includes start, center, and end guards plus quiet zones. Scanners care about the module pattern; the bars here are generated from the same binary encoding used by printed EAN-13 labels.

LinkedIn
© 2026 Chris Nager · Source · Follow my progress

Gatsby-built, Netlify-hosted, PageSpeed Insights-approved (💯).