Collection of hand-picked free HTML and CSS hexagon code examples. Update of January 2020 collection. 3 new items.
Table of Contents
Hexagons
Links
Made with
- HTML / CSS (SCSS)
About a code
Hexagon
Pure CSS hexagon with gradient.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hexagon Loading With CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Butterfly Hexagon
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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
Links
Made with
- HTML / CSS
About the code
Animated Hexagons
3D animated hexagons.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hexagon
Pure CSS hexagon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hexagonal Cycle
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS
About the code
CSS 3D Hexagon
Pure CSS 3D hexagon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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
Links
Made with
- HTML / CSS
About a code
Creative Hexagon with Hover Effect
Creative hexagon with hover effect using HTML 5 and CSS 3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Hive Photo Gallery Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
ABCDE
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
Made with
- HTML / CSS
About the code
Hexagonal Responsive Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS
About the code
Responsive Hexagonal Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -