14 CSS Hexagons
Collection of hand-picked free HTML and CSS hexagon code examples.
- Hexagons
- Hexagon Grids
About the code
Hexagon Badges
Hexagon badges with Font Awesome icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
![Animated Hexagons - GIF Demo]( "Animated Hexagons")
Author
- sattellite
About the code
Animated Hexagons
3D animated hexagons.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Author
- Alexander Erlandsson
About the code
Hexagon
Pure CSS hexagon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
![Hexagonal Cycle - GIF Demo]( "Hexagonal Cycle")
About the code
Hexagonal Cycle
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
![Rotating Hexagon Loader - GIF Demo]( "Rotating Hexagon Loader")
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: -
![Hexagon Shapes - GIF Demo]( "Hexagon Shapes")
Author
- Karen Menezes
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: -
![Hexagon, Octagon, Dodecagon - GIF Demo]( "Hexagon, Octagon, Dodecagon")
About the code
Hexagon, Octagon, Dodecagon
Endless animation circular motion loading. Flat design.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Davide Sandonà
About the code
CSS 3D Hexagon
Pure CSS 3D hexagon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
![Hexagonal Button - GIF Demo]( "Hexagonal Button")
Author
- Franco Bouly
About the code
Hexagonal Button
Experimenting hexagons in CSS3 and how to bring motion to them.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Kevin Dee Davis
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
About the code
Hexagonal Responsive Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
![Auto Hexagonal CSS Grid Layout - GIF Demo]( "Auto Hexagonal CSS Grid Layout")
About the code
Auto Hexagonal CSS Grid Layout
Impressive auto hexagonal CSS Grid layout.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Author
- John Heiner
About the code
Hexagon Grid with Hover
CSS Hexagon grid with animation flip on hover.
Compatible browsers: Chrome, Edge, Opera, Safari
Dependencies: -
Author
- Vincent Durand
About the code
Responsive Hexagonal Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -