Collection of free HTML and CSS badge code examples. Update of June 2019 collection. 5 new items.

  1. CSS Ribbons

Creator

  • Jason Bennett

Programming language

  • HTML / CSS

Information a code

Badge Loader – Intro Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: B is for Badge

Creator

  • Grace Ongchangco

Programming language

  • HTML / CSS (SCSS)

Information a code

B is for Badge

Badges are used as ornaments in website designing. They are usually used to express the quality/reliability of a product or a service.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • Figachit

Programming language

  • HTML / CSS

Information a code

Animated CSS Badge

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Simon Wuyts

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS Badge

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Exclusive Badge

Creator

  • Soufiane

Programming language

  • HTML / CSS

Information a code

Exclusive Badge

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Jon Uhlmann

Programming language

  • HTML / CSS (SCSS)

Information the code

Responsive SVG Black Friday Badge

Badge with text on a path using SVG.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Boulder Badge

Creator

  • Piv

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Boulder Badge

Pure CSS illustration based on design by Patrick Moriarty.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Download App Badge

Creator

  • Mohammad Jamal Dashtaki

Programming language

  • HTML / CSS (SCSS)

Information the code

Download App Badge

Download app badge with Font Awesome icons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: GDPR Badges

Creator

  • Kingjohnny

Programming language

  • HTML / CSS

Information the code

GDPR Badges

GDPR badges in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: linearicons.css

Demo image: Badge Animation SVG Badge Animation SVG - GIF Demo

Creator

  • Adelia Gataullina

Programming language

  • HTML / CSS

Information the code

Badge Animation SVG

SVG badge with CSS animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Hexagon Badges

Creator

  • Olivia

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Hexagon Badges

Hexagon badges with Font Awesome icons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Contributor Badge Flip Exploration Contributor Badge Flip Exploration - GIF Demo

Creator

  • Chris Johnson

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Contributor Badge Flip Exploration

Exploration for animate achievement, attempting to balance practicality and delight.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Badge with Dynamic Text Badge with Dynamic Text - GIF Demo

Creator

  • mi-ca

Programming language

  • HTML / CSS / JavaScript

Information the code

Badge with Dynamic Text

SVG badge emblem with dynamic curved text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Badge Animation Badge Animation - GIF Demo

Creator

  • Christine Clark

Programming language

  • HTML / CSS (SCSS)

Information the code

Badge Animation

Landscape badge CSS animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Small CSS Badge

Creator

  • Phil

Programming language

  • HTML / CSS (SCSS)

Information the code

Small CSS Badge

Small CSS label/badge.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Badges CSS Badges - GIF Demo

Creator

  • Littlesnippets.com

Programming language

  • HTML / CSS

Information the code

CSS Logo/Badges

Collection of pure CSS Logo/Badge examples: retro, hat style, squared and other.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Sunset Badge

Creator

  • LukyVJ

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Sunset Badge

Sunset behind mountains – pure CSS badge.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated CSS Badge Animated CSS Badge - GIF Demo

Creator

  • Zach Cole

Programming language

  • HTML / CSS

Information the code

Animated CSS Badge

Animated CSS Big Basin Badge. Second in a series of animated park badges.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated CSS Banff Badge Animated CSS Banff Badge - GIF Demo

Creator

  • Zach Cole

Programming language

  • HTML / CSS

Information the code

Animated CSS Banff Badge

First in a series of animated National Park badges.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Title Badges

Creator

  • daniesy

Programming language

  • HTML / CSS (SCSS)

Information the code

Title Badges

Pure CSS title badges.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Badge

Creator

  • Hugo Giraudel

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Badge

Very pretty and clean HTML and CSS badge.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: