Collection of hand-picked free HTML and CSS barcode examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Author

  • Daniel Fontes

Links

Made with

  • HTML / CSS (Less)

About a code

Electronic Boarding Pass

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chance Squires

Links

Made with

  • HTML / CSS

About a code

Barcode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Animated Barcode Animated Barcode - GIF Demo

Author

  • Dayna Blackwell

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

Demo image: CSS Animation Barcode CSS Animation Barcode - GIF Demo

Author

  • Lexa

Links

Made with

  • HTML / CSS

About the code

CSS Animation Barcode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Daniel Hwang

Links

Made with

  • HTML / CSS

About a code

Barcode Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: RGB Barcode Font RGB Barcode Font - GIF Demo

Author

  • Sean Free

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: -

Demo image: Pure CSS Barcode

Author

  • Sichtelement | Design

Links

Made with

  • HTML / CSS

About a code

Pure CSS Barcode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Barcode (UPC-A)

Author

  • Nick Matantsev

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's li 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: -

Author

  • Mister Rain

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Hitman Absolution Loading Screen Big Barcode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS-Only 12-digit UPC-A Barcode Generator

Author

  • Woodrow Barlow

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: -