TOP 17 CSS Hexagons

HEXAGON

Pure CSS hexagon with gradient.

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

HEXAGON LOADING WITH CSS

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

BUTTERFLY HEXAGON

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

HEXAGON BADGES

Hexagon badges with Font Awesome icons.

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

ANIMATED HEXAGONS

3D animated hexagons.

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

HEXAGON

Pure CSS hexagon.

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

HEXAGONAL CYCLE

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

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.

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.

HEXAGON, OCTAGON, DODECAGON

Endless animation circular motion loading. Flat design.

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

CSS 3D HEXAGON

Pure CSS 3D hexagon.

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

HEXAGONAL BUTTON

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

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

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.

HEXAGONAL RESPONSIVE GRID

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

AUTO HEXAGONAL CSS GRID LAYOUT

Impressive auto hexagonal CSS Grid layout.

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

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.

RESPONSIVE HEXAGONAL GRID

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