Generate JAN Barcodes with Pure CSS – Barcode.css

barcode-css a lightweight CSS library that generates JAN (EAN-13) barcodes without a single line of JavaScript.

It creates functional HTML barcodes through an interactive radio button matrix, where selecting digits automatically updates the barcode visualization in real-time using CSS selectors and pseudo-elements.

How to use it:

1. Download the barcode.css file and load it into your document:

<link rel="stylesheet" href="barcode.css">

2. Create the Barcode HTML. This structure is a series of divs that the CSS will target to create the black and white bars.

<div id="barcode">
  <div class="left-margin">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="left-guardbar">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="left-databar">
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
  <div class="center-bar">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="right-databar">
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="datachar">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
  <div class="right-guardbar">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="right-margin">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="digits">
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
  </div>
</div>

3. The barcode is controlled by a matrix of 12 rows of radio buttons, one for each of the first 12 digits. Selecting a radio button updates the barcode instantly.

<div class="digit-inputs">
  <div class="digit00"><input type="radio" id="input00-0" name="input00" value="0" checked="checked"/><label for="input00-0">0</label><input type="radio" id="input00-1" name="input00" value="1"/><label for="input00-1">1</label><input type="radio" id="input00-2" name="input00" value="2"/><label for="input00-2">2</label><input type="radio" id="input00-3" name="input00" value="3"/><label for="input00-3">3</label><input type="radio" id="input00-4" name="input00" value="4"/><label for="input00-4">4</label><input type="radio" id="input00-5" name="input00" value="5"/><label for="input00-5">5</label><input type="radio" id="input00-6" name="input00" value="6"/><label for="input00-6">6</label><input type="radio" id="input00-7" name="input00" value="7"/><label for="input00-7">7</label><input type="radio" id="input00-8" name="input00" value="8"/><label for="input00-8">8</label><input type="radio" id="input00-9" name="input00" value="9"/><label for="input00-9">9</label></div>
  <div class="digit01"><input type="radio" id="input01-0" name="input01" value="0" checked="checked"/><label for="input01-0">0</label><input type="radio" id="input01-1" name="input01" value="1"/><label for="input01-1">1</label><input type="radio" id="input01-2" name="input01" value="2"/><label for="input01-2">2</label><input type="radio" id="input01-3" name="input01" value="3"/><label for="input01-3">3</label><input type="radio" id="input01-4" name="input01" value="4"/><label for="input01-4">4</label><input type="radio" id="input01-5" name="input01" value="5"/><label for="input01-5">5</label><input type="radio" id="input01-6" name="input01" value="6"/><label for="input01-6">6</label><input type="radio" id="input01-7" name="input01" value="7"/><label for="input01-7">7</label><input type="radio" id="input01-8" name="input01" value="8"/><label for="input01-8">8</label><input type="radio" id="input01-9" name="input01" value="9"/><label for="input01-9">9</label></div>
  <div class="digit02"><input type="radio" id="input02-0" name="input02" value="0" checked="checked"/><label for="input02-0">0</label><input type="radio" id="input02-1" name="input02" value="1"/><label for="input02-1">1</label><input type="radio" id="input02-2" name="input02" value="2"/><label for="input02-2">2</label><input type="radio" id="input02-3" name="input02" value="3"/><label for="input02-3">3</label><input type="radio" id="input02-4" name="input02" value="4"/><label for="input02-4">4</label><input type="radio" id="input02-5" name="input02" value="5"/><label for="input02-5">5</label><input type="radio" id="input02-6" name="input02" value="6"/><label for="input02-6">6</label><input type="radio" id="input02-7" name="input02" value="7"/><label for="input02-7">7</label><input type="radio" id="input02-8" name="input02" value="8"/><label for="input02-8">8</label><input type="radio" id="input02-9" name="input02" value="9"/><label for="input02-9">9</label></div>
  <div class="digit03"><input type="radio" id="input03-0" name="input03" value="0" checked="checked"/><label for="input03-0">0</label><input type="radio" id="input03-1" name="input03" value="1"/><label for="input03-1">1</label><input type="radio" id="input03-2" name="input03" value="2"/><label for="input03-2">2</label><input type="radio" id="input03-3" name="input03" value="3"/><label for="input03-3">3</label><input type="radio" id="input03-4" name="input03" value="4"/><label for="input03-4">4</label><input type="radio" id="input03-5" name="input03" value="5"/><label for="input03-5">5</label><input type="radio" id="input03-6" name="input03" value="6"/><label for="input03-6">6</label><input type="radio" id="input03-7" name="input03" value="7"/><label for="input03-7">7</label><input type="radio" id="input03-8" name="input03" value="8"/><label for="input03-8">8</label><input type="radio" id="input03-9" name="input03" value="9"/><label for="input03-9">9</label></div>
  <div class="digit04"><input type="radio" id="input04-0" name="input04" value="0" checked="checked"/><label for="input04-0">0</label><input type="radio" id="input04-1" name="input04" value="1"/><label for="input04-1">1</label><input type="radio" id="input04-2" name="input04" value="2"/><label for="input04-2">2</label><input type="radio" id="input04-3" name="input04" value="3"/><label for="input04-3">3</label><input type="radio" id="input04-4" name="input04" value="4"/><label for="input04-4">4</label><input type="radio" id="input04-5" name="input04" value="5"/><label for="input04-5">5</label><input type="radio" id="input04-6" name="input04" value="6"/><label for="input04-6">6</label><input type="radio" id="input04-7" name="input04" value="7"/><label for="input04-7">7</label><input type="radio" id="input04-8" name="input04" value="8"/><label for="input04-8">8</label><input type="radio" id="input04-9" name="input04" value="9"/><label for="input04-9">9</label></div>
  <div class="digit05"><input type="radio" id="input05-0" name="input05" value="0" checked="checked"/><label for="input05-0">0</label><input type="radio" id="input05-1" name="input05" value="1"/><label for="input05-1">1</label><input type="radio" id="input05-2" name="input05" value="2"/><label for="input05-2">2</label><input type="radio" id="input05-3" name="input05" value="3"/><label for="input05-3">3</label><input type="radio" id="input05-4" name="input05" value="4"/><label for="input05-4">4</label><input type="radio" id="input05-5" name="input05" value="5"/><label for="input05-5">5</label><input type="radio" id="input05-6" name="input05" value="6"/><label for="input05-6">6</label><input type="radio" id="input05-7" name="input05" value="7"/><label for="input05-7">7</label><input type="radio" id="input05-8" name="input05" value="8"/><label for="input05-8">8</label><input type="radio" id="input05-9" name="input05" value="9"/><label for="input05-9">9</label></div>
  <div class="digit06"><input type="radio" id="input06-0" name="input06" value="0" checked="checked"/><label for="input06-0">0</label><input type="radio" id="input06-1" name="input06" value="1"/><label for="input06-1">1</label><input type="radio" id="input06-2" name="input06" value="2"/><label for="input06-2">2</label><input type="radio" id="input06-3" name="input06" value="3"/><label for="input06-3">3</label><input type="radio" id="input06-4" name="input06" value="4"/><label for="input06-4">4</label><input type="radio" id="input06-5" name="input06" value="5"/><label for="input06-5">5</label><input type="radio" id="input06-6" name="input06" value="6"/><label for="input06-6">6</label><input type="radio" id="input06-7" name="input06" value="7"/><label for="input06-7">7</label><input type="radio" id="input06-8" name="input06" value="8"/><label for="input06-8">8</label><input type="radio" id="input06-9" name="input06" value="9"/><label for="input06-9">9</label></div>
  <div class="digit07"><input type="radio" id="input07-0" name="input07" value="0" checked="checked"/><label for="input07-0">0</label><input type="radio" id="input07-1" name="input07" value="1"/><label for="input07-1">1</label><input type="radio" id="input07-2" name="input07" value="2"/><label for="input07-2">2</label><input type="radio" id="input07-3" name="input07" value="3"/><label for="input07-3">3</label><input type="radio" id="input07-4" name="input07" value="4"/><label for="input07-4">4</label><input type="radio" id="input07-5" name="input07" value="5"/><label for="input07-5">5</label><input type="radio" id="input07-6" name="input07" value="6"/><label for="input07-6">6</label><input type="radio" id="input07-7" name="input07" value="7"/><label for="input07-7">7</label><input type="radio" id="input07-8" name="input07" value="8"/><label for="input07-8">8</label><input type="radio" id="input07-9" name="input07" value="9"/><label for="input07-9">9</label></div>
  <div class="digit08"><input type="radio" id="input08-0" name="input08" value="0" checked="checked"/><label for="input08-0">0</label><input type="radio" id="input08-1" name="input08" value="1"/><label for="input08-1">1</label><input type="radio" id="input08-2" name="input08" value="2"/><label for="input08-2">2</label><input type="radio" id="input08-3" name="input08" value="3"/><label for="input08-3">3</label><input type="radio" id="input08-4" name="input08" value="4"/><label for="input08-4">4</label><input type="radio" id="input08-5" name="input08" value="5"/><label for="input08-5">5</label><input type="radio" id="input08-6" name="input08" value="6"/><label for="input08-6">6</label><input type="radio" id="input08-7" name="input08" value="7"/><label for="input08-7">7</label><input type="radio" id="input08-8" name="input08" value="8"/><label for="input08-8">8</label><input type="radio" id="input08-9" name="input08" value="9"/><label for="input08-9">9</label></div>
  <div class="digit09"><input type="radio" id="input09-0" name="input09" value="0" checked="checked"/><label for="input09-0">0</label><input type="radio" id="input09-1" name="input09" value="1"/><label for="input09-1">1</label><input type="radio" id="input09-2" name="input09" value="2"/><label for="input09-2">2</label><input type="radio" id="input09-3" name="input09" value="3"/><label for="input09-3">3</label><input type="radio" id="input09-4" name="input09" value="4"/><label for="input09-4">4</label><input type="radio" id="input09-5" name="input09" value="5"/><label for="input09-5">5</label><input type="radio" id="input09-6" name="input09" value="6"/><label for="input09-6">6</label><input type="radio" id="input09-7" name="input09" value="7"/><label for="input09-7">7</label><input type="radio" id="input09-8" name="input09" value="8"/><label for="input09-8">8</label><input type="radio" id="input09-9" name="input09" value="9"/><label for="input09-9">9</label></div>
  <div class="digit10"><input type="radio" id="input10-0" name="input10" value="0" checked="checked"/><label for="input10-0">0</label><input type="radio" id="input10-1" name="input10" value="1"/><label for="input10-1">1</label><input type="radio" id="input10-2" name="input10" value="2"/><label for="input10-2">2</label><input type="radio" id="input10-3" name="input10" value="3"/><label for="input10-3">3</label><input type="radio" id="input10-4" name="input10" value="4"/><label for="input10-4">4</label><input type="radio" id="input10-5" name="input10" value="5"/><label for="input10-5">5</label><input type="radio" id="input10-6" name="input10" value="6"/><label for="input10-6">6</label><input type="radio" id="input10-7" name="input10" value="7"/><label for="input10-7">7</label><input type="radio" id="input10-8" name="input10" value="8"/><label for="input10-8">8</label><input type="radio" id="input10-9" name="input10" value="9"/><label for="input10-9">9</label></div>
  <div class="digit11"><input type="radio" id="input11-0" name="input11" value="0" checked="checked"/><label for="input11-0">0</label><input type="radio" id="input11-1" name="input11" value="1"/><label for="input11-1">1</label><input type="radio" id="input11-2" name="input11" value="2"/><label for="input11-2">2</label><input type="radio" id="input11-3" name="input11" value="3"/><label for="input11-3">3</label><input type="radio" id="input11-4" name="input11" value="4"/><label for="input11-4">4</label><input type="radio" id="input11-5" name="input11" value="5"/><label for="input11-5">5</label><input type="radio" id="input11-6" name="input11" value="6"/><label for="input11-6">6</label><input type="radio" id="input11-7" name="input11" value="7"/><label for="input11-7">7</label><input type="radio" id="input11-8" name="input11" value="8"/><label for="input11-8">8</label><input type="radio" id="input11-9" name="input11" value="9"/><label for="input11-9">9</label></div>
</div>

How it works:

When you check an input, a CSS rule like this is triggered: :root:has(.digit01 input[value="5"]:checked) { --d01: 5; }. This rule uses the :has() pseudo-class to detect which input is checked within a specific container and then sets a global CSS variable (--d01) to that value. This is the fundamental input mechanism.

From there, the library performs the EAN-13 check digit calculation entirely within CSS. It sums the odd and even-positioned digits using calc(), applies the *3 multiplier, and finds the final check digit with the mod() function—all stored in another CSS variable (--d12). I’ve rarely seen CSS used for this kind of mathematical logic.

The most complex part is the encoding of each digit into a 7-module pattern of black and white bars. The CSS contains massive calc() functions that effectively simulate boolean logic. A multiplication (var(--a) * var(--b)) acts as an AND gate, while a formula like calc(1 - (1 - var(--a)) * (1 - var(--b))) simulates an OR gate. These logical chains determine whether each of the seven bars for a digit should be black (1) or white (0).

Finally, the background color of each bar div is set with background: rgb(calc(255 * (1 - var(--rX))), ...) where --rX is the computed 0 or 1. The numeric digits displayed below the barcode are also rendered with CSS, using the counter-reset and content properties to display the values of the --d00 to --d12 variables.

Related Resources:

• 10 Best Custom QR Code Generators In JavaScript