Table of Contents

HEXAGON

Pure CSS hexagon with gradient.

See the Pen Hexagon by iotacb (@iotacb) on CodePen.

Author

  • iotacb

Made with

  • HTML / CSS (SCSS)

HEXAGON LOADING WITH CSS

See the Pen Hexagon Loading With CSS (2) by Osama Belal (@osama-belal) on CodePen.

Author

  • Osama Belal

Made with

  • HTML / CSS

BUTTERFLY HEXAGON

See the Pen Butterfly Hexagon by Anurag (@anuraghazra) on CodePen.

Author

  • Anurag

Made with

  • HTML / CSS

HEXAGON BADGES

Hexagon badges with Font Awesome icons.

See the Pen Hexagon Badges with Font Awesome icons by Olivia Ng (@oliviale) on CodePen.

Author

  • Olivia

Made with

  • HTML (Pug) / CSS (SCSS)

ANIMATED HEXAGONS

3D animated hexagons.

See the Pen 3d animated hexagons by sattellite (@sattellite) on CodePen.

Author

  • sattellite

Made with

  • HTML / CSS

HEXAGON

Pure CSS hexagon.

See the Pen CSS Hexagon by Alexander Erlandsson (@alexerlandsson) on CodePen.

Author

  • Alexander Erlandsson

Made with

  • HTML / CSS (SCSS)

HEXAGONAL CYCLE

See the Pen Hexagonal cycle by Bali Balo (@bali_balo) on CodePen.

Author

  • Bali Balo

Made with

  • HTML / CSS (SCSS)

ROTATING HEXAGON LOADER

Clean rotating hexagon loader in HTML and CSS.

See the Pen #Codevember #24 – CSS Rotating Hexagon Loader by Soufiane Lasri (@SoufianeLasri) on CodePen.

Author

  • Soufiane Lasri

Made with

  • HTML (Pug) / CSS (Stylus)

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”.

See the Pen Clip-path: Hexagon shapes for dummy profile page by Karen Menezes (@imohkay) on CodePen.

Author

  • Karen Menezes

Made with

  • HTML / CSS

HEXAGON, OCTAGON, DODECAGON

Endless animation circular motion loading. Flat design.

See the Pen Hexagon, Octagon, Dodecagon by Shandy (@Shandy) on CodePen.

Author

  • Shandy

Made with

  • HTML / CSS

CSS 3D HEXAGON

Pure CSS 3D hexagon.

See the Pen CSS 3D Hexagon by Davide Sandonà (@Davide_sd) on CodePen.

Author

  • Davide Sandonà

Made with

  • HTML / CSS

HEXAGONAL BUTTON

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

See the Pen Hexagonal Button by Franco Bouly (@rayfranco) on CodePen.

Author

  • Franco Bouly

Made with

  • HTML (Pug) / CSS (SCSS)

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.

See the Pen Responsive Hexagon Grid by Kevin Dee Davis (@kevindeedavis) on CodePen.

Author

  • Kevin Dee Davis

Made with

  • HTML / CSS (SCSS)

HEXAGONAL RESPONSIVE GRID

See the Pen Hexagonal Responsive Grid by adam (@adamriguez) on CodePen.

Author

  • adam

Made with

  • HTML / CSS

AUTO HEXAGONAL CSS GRID LAYOUT

Impressive auto hexagonal CSS Grid layout.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

Author

  • Kseso

Made with

  • HTML / CSS

HEXAGON GRID WITH HOVER

CSS Hexagon grid with animation flip on hover.

See the Pen Hexagon Grid w/ Hover by John Heiner (@johnheiner) on CodePen.

Author

  • John Heiner

Made with

  • HTML / CSS (SCSS)

RESPONSIVE HEXAGONAL GRID

See the Pen Responsive Hexagonal Grid by Vincent Durand (@onediv) on CodePen.

Author

  • Vincent Durand

Made with

  • HTML / CSS