Collection of hand-picked free HTML and CSS barcode examples.


Links
Made with
- HTML / CSS / JavaScript
About the code
Animated Barcode
Animated barcode with 'Libre Barcode 128 Text' font in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js


Links
Made with
- HTML / CSS
About the code
CSS Animation Barcode
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (Sass) / JavaScript (Babel)
About the code
RGB Barcode Font
Animated barcode RGB text. Used 'Libre Barcode 39 Text' font.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Slim) / CSS (Less)
About the code
Pure CSS Barcode (UPC-A)
Just a plain UPC-A barcode.
How it works: UPC codes use 1-to-4 "pixel" wide bars to encode digits; each digit is a fixed 7 "pixels" wide overall (technically, they are called "modules" and not pixels).
I use the multiple-box-shadow trick to display the bars: the::before
element of each digit'sli
is the anchor/placeholder, and its shadows are the visible bars. The::before
element itself is moved outside of clipping area so as not to obscure any of the box-shadows.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
CSS-Only 12-digit UPC-A Barcode Generator
A completely accurate 12-digit UPC barcode generated using data-attributes and background-gradients. The values can be modified to generate a new barcode. Try scanning it with a barcode reader on your smartphone! This is a solid demonstration of some of the things that can be done with SASS scripting.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -