01 / Barcode gallery

Matrix and stacked formats.

QR Code, Data Matrix, Aztec, and PDF417. Each symbol is generated directly from CSS as vector artwork.

QR Code

Data: https://example.com/report-precision-barcode(qr-code, "https://example.com/report")

Data Matrix

Data: PART-123-precision-barcode(data-matrix, "PART-123")

Aztec

Data: FFDW-27-0418-precision-barcode(aztec, "FFDW-27-0418")

PDF417

Data: BOARDING-PASS-precision-barcode(pdf417, "BOARDING-PASS")

Keep the clear area around every symbol intact. Supply EAN/UPC values with their complete, valid check digit; the generated artwork includes the digits.

02 / Barcode gallery

Linear and retail formats.

Six formats for references, parts, and retail labels. Every value below is sample data.

Code 128

Data: SHIP-123-precision-barcode(code128, "SHIP-123")

Code 39

Data: PART-123-precision-barcode(code-39, "PART-123")

EAN-13

Data: 4006381333931-precision-barcode(ean-13, "4006381333931")

EAN-8

Data: 96385074-precision-barcode(ean-8, "96385074")

UPC-A

Data: 036000291452-precision-barcode(upc-a, "036000291452")

UPC-E

Data: 05096893-precision-barcode(upc-e, "05096893")

Keep the clear area around every symbol intact. Supply EAN/UPC values with their complete, valid check digit; the generated artwork includes the digits.

03 / Barcode gallery

Size with CSS.

Each symbol encodes https://example.com/report. Print at actual size to compare the 25 mm and 40 mm examples.

25 mm square

width: 25mm; height: 25mm; background-size: contain;-precision-barcode(qr-code, "https://example.com/report")

40 mm square

width: 40mm; height: 40mm; background-size: contain;-precision-barcode(qr-code, "https://example.com/report")

Generated content

The image uses its natural size.content: -precision-barcode(qr-code, "https://example.com/report") / "Report QR code";

Background image

An explicitly sized box with background-size: contain and background-repeat: no-repeat.-precision-barcode(qr-code, "https://example.com/report")

Use contain to preserve proportions and no-repeat to prevent tiling. Keep modules large enough for your scanner and leave quiet zones clear. Test the final printed size.

04 / Barcode gallery

Choose where data lives.

All four symbols encode https://example.com/report. Use the form that fits your template or stylesheet.

CSS string

A literal string supplies the data directly.-precision-barcode(qr-code, "https://example.com/report")

HTML attribute

The originating element carries data-value="https://example.com/report".content: -precision-barcode(qr-code, attr(data-value));

CSS custom property

The property contains a quoted string: --barcode-data: "https://example.com/report";-precision-barcode(qr-code, var(--barcode-data))

URL input

QR Code can encode a resolved URL without fetching it.-precision-barcode(qr-code, url("https://example.com/report"))

attr() encodes literal attribute text: a relative href stays relative. URL input resolves against the stylesheet or document base before encoding. Keep a visible label and equivalent text beside the barcode.

05 / Barcode gallery

Color and QR correction.

Choose CSS colors and one of four QR error-correction levels. The defaults are black on white and QR correction M.

Custom foreground and background

Dark teal on cream, matching the event ticket.-precision-barcode(aztec, "FFDW-27-0418", #193b47, #fff8e9)

currentColor and transparency

The symbol inherits teal; its background reveals a flat cream surface.-precision-barcode(qr-code, "FFDW-27-0418", currentColor, transparent)

Four correction levels, the same URL

L / Low

Format argumentqr-code(error-correction-low)

M / Medium

Format argumentqr-code(error-correction-medium)

Q / Quartile

Format argumentqr-code(error-correction-quartile)

H / High

Format argumentqr-code(error-correction-high)

Foreground and background accept CSS colors, including currentColor and alpha. The background also fills the quiet zone. Keep strong contrast and a clear, flat background so symbols stay readable.