Collection of hand-picked free HTML and CSS hexagon code examples. Update of January 2020 collection. 3 new items.

Table of Contents

  1. Hexagons
  2. Hexagon Grids

Hexagons

Author

  • iotacb

Made with

  • HTML / CSS (SCSS)

About a code

Hexagon

Pure CSS hexagon with gradient.

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

Responsive: no

Dependencies: -

Author

  • Osama Belal

Made with

  • HTML / CSS

About a code

Hexagon Loading With CSS

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

Responsive: no

Dependencies: -

Author

  • Anurag

Made with

  • HTML / CSS

About a code

Butterfly Hexagon

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Hexagon Badges

Author

  • Olivia

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hexagon Badges

Hexagon badges with Font Awesome icons.

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

Dependencies: font-awesome.css

Demo image: Animated Hexagons Animated Hexagons - GIF Demo

Author

  • sattellite

Made with

  • HTML / CSS

About the code

Animated Hexagons

3D animated hexagons.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Hexagon

Author

  • Alexander Erlandsson

Made with

  • HTML / CSS (SCSS)

About the code

Hexagon

Pure CSS hexagon.

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

Dependencies: -

Demo image: Hexagonal Cycle Hexagonal Cycle - GIF Demo

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

About the code

Hexagonal Cycle

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Rotating Hexagon Loader Rotating Hexagon Loader - GIF Demo

Author

  • Soufiane Lasri

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Rotating Hexagon Loader

Clean rotating hexagon loader in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Hexagon Shapes Hexagon Shapes - GIF Demo

Author

  • Karen Menezes

Made with

  • HTML / CSS

About the code

Hexagon Shapes

An example of how clipping paths can create beautiful geometric shapes. Part of a demo for a Smashing Magazine article published in May 2015 titled "Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box".

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Hexagon, Octagon, Dodecagon Hexagon, Octagon, Dodecagon - GIF Demo

Author

  • Shandy

Made with

  • HTML / CSS

About the code

Hexagon, Octagon, Dodecagon

Endless animation circular motion loading. Flat design.

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

Dependencies: -

Demo image: CSS 3D Hexagon

Author

  • Davide SandonĂ 

Made with

  • HTML / CSS

About the code

CSS 3D Hexagon

Pure CSS 3D hexagon.

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

Dependencies: -

Demo image: Hexagonal Button Hexagonal Button - GIF Demo

Author

  • Franco Bouly

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hexagonal Button

Experimenting hexagons in CSS3 and how to bring motion to them.

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

Dependencies: -

Hexagon Grids

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

Creative Hexagon with Hover Effect

Creative hexagon with hover effect using HTML 5 and CSS 3.

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

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Hive Photo Gallery Grid

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

Responsive: yes

Dependencies: -

Demo image: ABCDE

Author

  • Ivan Bogachev

Made with

  • HTML (Pug) / CSS (Less)

About a code

ABCDE

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

Responsive: yes

Dependencies: -

Demo image: Responsive Hexagon Grid

Author

  • Kevin Dee Davis

Made with

  • HTML / CSS (SCSS)

About the code

Responsive Hexagon Grid

My stab at a method for displaying a potentially infinite number of hexagon cards. The color coding stylings mean something to the app I'm designing for... but also make it more interesting to look at all the same.

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

Dependencies: font-awesome.css

Demo image: Hexagonal Responsive Grid

Author

  • adam

Made with

  • HTML / CSS

About the code

Hexagonal Responsive Grid

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

Dependencies: -

Demo image: Auto Hexagonal CSS Grid Layout Auto Hexagonal CSS Grid Layout - GIF Demo

Author

  • Kseso

Made with

  • HTML / CSS

About the code

Auto Hexagonal CSS Grid Layout

Impressive auto hexagonal CSS Grid layout.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Hexagon Grid with Hover

Author

  • John Heiner

Made with

  • HTML / CSS (SCSS)

About the code

Hexagon Grid with Hover

CSS Hexagon grid with animation flip on hover.

Compatible browsers: Chrome, Edge, Opera, Safari

Dependencies: -

Demo image: Responsive Hexagonal Grid

Author

  • Vincent Durand

Made with

  • HTML / CSS

About the code

Responsive Hexagonal Grid

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

Dependencies: -