15+ Barcodes in CSS - Free Code + Demos

Collection of 15+ Barcodes in CSS. All items are 100% free and open-source.

1. Animated CSS Barcode

Barcodes in CSS - Animated CSS Barcode
Author: Dayna Blackwell (dayna-j)
Created on: November 22, 2018
Made with: HTML, SCSS, JS
Tags: barcode, animation, animated, css, jquery

2. CSS Animation Barcode

Barcodes in CSS - CSS Animation Barcode
Author: Lexa (lexctk)
Created on: February 27, 2018
Made with: HTML, CSS

3. RGB Text

Barcodes in CSS - RGB Text
Just because
Author: Sean Free (seanfree)
Created on: September 8, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: rgb, text, javascript, animation

4. Pure CSS Barcode (UPC-A)

Barcodes in CSS - 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). Wikipedia has the full details, but the encoding is nicely presentable as a simple line...
Read More
Author: Nick Matantsev (unframework)
Created on: January 23, 2017
Made with: Slim, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: barcode, pure-css, css, bar-code

5. CSS Grid & Flexbox EAN-13 Generator

Barcodes in CSS - CSS Grid & flexbox EAN-13 Generator
i was bored ... type in your numbers and press the generate image button -> right click -> save image -> done combined css grid and flexbox and tried a lot of stuff with js (i'm a js newbie so be nice with me) had to study the wikipedia page about International Article Numbers ._.
Author: creme (creme)
Created on: March 2, 2018
Made with: HTML, SCSS, JS
Tags: barcode, ean, canvas, cssgrid, generator

6. SVG Barcode Generator

Barcodes in CSS - SVG Barcode Generator
Author: Scott Fessler (FesslerForge)
Created on: January 7, 2014
Made with: HTML, CSS, JS
Tags: svg-upc-barcode

7. Barcode Generator

Barcodes in CSS - Barcode Generator
Code 39 Barcode generator in ES6 JavaScript. Created because I couldn't find a good library.
Author: Benjamin J DeLong (bozdoz)
Created on: January 19, 2018
Made with: HTML, CSS, JS
Tags: barcode, generator, es6

9. Hitman Absolution CSS3 Loading Animation

Barcodes in CSS - Hitman Absolution CSS3 loading animation
Inspired by Hitman Absolution. Pure CSS3 loading animation using keyframes and opacity.
Author: Donya.Gholiha (Donyagholiha)
Created on: June 7, 2019
Made with: HTML, CSS, JS
Tags: hitman, loading, css3, animation, barcode

10. CSS3 Barcode / QR Code Merge Made Interactive

Barcodes in CSS - CSS3 Barcode / QR Code merge made interactive
This is an experiment to create a pure css3 QR code that interacts. - Interactive merge between 1D and a 2D barcode with pure CSS
Author: Dimitrie Hoekstra (dimitrieh)
Created on: July 11, 2012
Made with: HTML, Less, JS

11. Barcode Animation

Barcodes in CSS - Barcode Animation
Author: Daniel Hwang (dbshwang)
Created on: January 31, 2018
Made with: HTML, CSS

12. Barcode Button

Barcodes in CSS - barcode button
Author: Mike Riley (mikeriley131)
Created on: November 28, 2018
Made with: HTML, CSS

13. BarCode

Barcodes in CSS - BarCode
Bar code generator , it's useful in data encryption
Author: Ahmed Mohsen (27mdmo7sn)
Created on: September 2, 2016
Made with: HTML, CSS, JS
Tags: barcode, data, encryption, security

14. Ng-barcode

Barcodes in CSS - ng-barcode
AngularJS directive that create code39 barcode
Author: Lorenzo D'Ianni (lorenzodianni)
Created on: November 26, 2015
Made with: HTML, JS
Tags: angular, barcode, code39, javascript