HEXAGON

Pure CSS hexagon with gradient.

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

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

Author

  • Osama Belal

Made with

  • HTML / CSS

BUTTERFLY HEXAGON

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

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

Author

  • Olivia

Made with

  • HTML (Pug) / CSS (SCSS)

ANIMATED HEXAGONS

3D animated hexagons.

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

Author

  • sattellite

Made with

  • HTML / CSS

HEXAGON

Pure CSS hexagon.

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

Author

  • Alexander Erlandsson

Made with

  • HTML / CSS (SCSS)

HEXAGONAL CYCLE

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

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

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

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

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

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

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

Author

  • Kevin Dee Davis

Made with

  • HTML / CSS (SCSS)

HEXAGONAL RESPONSIVE GRID

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

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

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

Author

  • John Heiner

Made with

  • HTML / CSS (SCSS)

RESPONSIVE HEXAGONAL GRID

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

Author

  • Vincent Durand

Made with

  • HTML / CSS