Post thumbnail: 14 CSS Hexagons

14 CSS Hexagons

Collection of hand-picked free HTML and CSS hexagon code examples.

Table of Contents

  1. Hexagons
  2. Hexagon Grids

Hexagons

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

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

back to top