If you’re seeking to enrich the user experience with CSS hexagon patterns, look nowhere else and step right into our vibrant collection of CSS hexagons!
In this post, we present a comprehensive collection of free HTML and CSS hexagons sourced from reputable repositories like GitHub and CodePen. These repositories house meticulously crafted hexagon shapes, catering to diverse website themes and design needs.
Hexagons are gaining popularity in web design because of their visually attractive and aesthetically pleasing geometric characteristics. Our CSS hexagons collection provides a fresh and engaging dimension to websites and web applications. Each example carries unique visual appeal, flexibility, and adaptability that fit on any browser or device screen.
In web design, these shapes are used to add a touch of modernity. We’re excited to showcase a diverse collection of hexagons, ranging from 3D hexagons and SVG gradient hexagons to advanced CSS honeycomb grids to animated rotating hexagon loaders.
This comprehensive collection not only provides interactive design inspiration but also plays a pivotal role in boosting engagement on modern websites. Let’s explore the compilation of interactive CSS hexagon examples and get inspired to create dynamic layouts using unique CSS hexagon shapes.
1. Butterfly Hexagon
See the Pen
Butterfly Hexagon by Anurag (@anuraghazra)
on CodePen.
Author: Anurag @anuraghazra
Links: Source Code / Demo
Created on: June 24, 2019
Made with: HTML, CSS
2. Hexagonal Responsive Grid
See the Pen
Hexagonal Responsive Grid by adam (@adamriguez)
on CodePen.
Author: adam @adamriguez
Links: Source Code / Demo
Created on: July 18, 2017
Made with: HTML, CSS
3. Hexagon, Octagon, Dodecagon
See the Pen
Hexagon, Octagon, Dodecagon by Shandy (@Shandy)
on CodePen.
Author: Shandy @Shandy
Links: Source Code / Demo
Created on: November 24, 2014
Made with: HTML, CSS
4. CSS Hexagon Grid
See the Pen
CSS Hexagon Grid by Eric Cornelissen (@ericornelissen)
on CodePen.
Author: Eric Cornelissen @ericornelissen
Links: Source Code / Demo
Created on: December 3, 2017
Made with: HTML, CSS
5. Responsive Hexagonal Grid
See the Pen
Responsive Hexagonal Grid by Vincent Durand (@onediv)
on CodePen.
Author: Vincent Durand @onediv
Links: Source Code / Demo
Created on: April 10, 2013
Made with: HTML, CSS
6. Blue Neon Glow CSS Hexagon
See the Pen
CodePen Challenge: Dots by Shruti (@Shruti-Ag)
on CodePen.
Author: Shruti @Shruti-Ag
Links: Source Code / Demo
Created on: August 22, 2019
Made with: HTML, CSS(SCSS)
7. Clip-path: Hexagon Shapes For Dummy Profile Page
See the Pen
Clip-path: Hexagon shapes for dummy profile page by Karen Menezes (@imohkay)
on CodePen.
Author: Karen Menezes @imohkay
Links: Source Code / Demo
Created on: May 7, 2015
Made with: HTML, CSS
8. SVGs, Gradients, And Skews – Oh My !
See the Pen
SVGs, Gradients, and Skews – Oh My ! by Jordan White (@jturnerwhite)
on CodePen.
Author: Jordan White @jturnerwhite
Links: Source Code / Demo
Created on: February 21, 2017
Made with: HTML, CSS(SCSS)
9. CSS 3D Hexagon
See the Pen
CSS 3D Hexagon by Davide Sandonà (@Davide_sd)
on CodePen.
Author: Davide Sandonà @Davide_sd
Links: Source Code / Demo
Created on: August 20, 2014
Made with: HTML, CSS, JS
10. CSS Honeycomb Iii – (Hexagon Grid)
See the Pen
CSS Honeycomb III – (hexagon grid) by Zarko Rvovic (@nocni_sovac)
on CodePen.
Author: Zarko Rvovic @nocni_sovac
Links: Source Code / Demo
Created on: August 19, 2020
Made with: HTML, CSS(SCSS), JS
11. Hexagon Loading With CSS
See the Pen
Hexagon Loading With CSS (2) by Osama Belal (@osama-belal)
on CodePen.
Author: Osama Belal @osama-belal
Links: Source Code / Demo
Created on: July 1, 2019
Made with: HTML, CSS
12. Hexagon Tiles
See the Pen
Hexagon Tiles by Graham Pyne (@gpyne)
on CodePen.
Author: Graham Pyne @gpyne
Links: Source Code / Demo
Created on: August 19, 2013
Made with: HTML, CSS
13. CSS Rotating Hexagon Loader
See the Pen
#Codevember #24 – CSS Rotating Hexagon Loader by Soufiane Lasri (@SoufianeLasri)
on CodePen.
Author: Soufiane Lasri @SoufianeLasri
Links: Source Code / Demo
Created on: November 24, 2015
Made with: HTML(Pug), CSS(Stylus)
14. Hexagon Grid W/ Hover
See the Pen
Hexagon Grid w/ Hover by John Heiner (@johnheiner)
on CodePen.
Author: John Heiner @johnheiner
Links: Source Code / Demo
Created on: April 23, 2016
Made with: HTML, CSS(SCSS)
15. Css Hexagons!
See the Pen
Css Hexagons! by tkitek (@tkitek)
on CodePen.
Author: tkitek @tkitek
Links: Source Code / Demo
Created on: June 4, 2013
Made with: HTML, CSS
16. Hexagon Badges With Font Awesome Icons
See the Pen
Hexagon Badges with Font Awesome icons by Olivia Ng (@oliviale)
on CodePen.
Author: Olivia Ng @oliviale
Links: Source Code / Demo
Created on: January 4, 2018
Made with: HTML(Pug), CSS(SCSS)
17. CSS Hexagon Loader
See the Pen
CSS Hexagon Loader by D7460N (@dragontheory)
on CodePen.
Author: D7460N @dragontheory
Links: Source Code / Demo
Created on: March 21, 2019
Made with: HTML, CSS
18. CSS Hexagon
See the Pen
CSS Hexagon by Alexander Erlandsson (@alexerlandsson)
on CodePen.
Author: Alexander Erlandsson @alexerlandsson
Links: Source Code / Demo
Created on: January 5, 2018
Made with: HTML, CSS(SCSS)
19. Semicircle Hexagon
See the Pen
Semicircle Hexagon by Stix (@stix)
on CodePen.
Author: Stix @stix
Links: Source Code / Demo
Created on: August 19, 2016
Made with: HTML, CSS
20. Auto Hexagonal CSS Grid Layout
See the Pen
Auto Hexagonal CSS Grid Layout by Kseso (@Kseso)
on CodePen.
Author: Kseso @Kseso
Links: Source Code / Demo
Created on: April 6, 2017
Made with: HTML, CSS
21. 3d Animated Hexagons
See the Pen
3d animated hexagons by sattellite (@sattellite)
on CodePen.
Author: sattellite @sattellite
Links: Source Code / Demo
Created on: January 13, 2016
Made with: HTML, CSS
22. CSS Hexagon
See the Pen
CSS Hexagon by darsain (@darsain)
on CodePen.
Author: darsain @darsain
Links: Source Code / Demo
Created on: April 3, 2013
Made with: HTML, CSS
23. Hexagons Animation (Pure CSS)
See the Pen
Hexagons animation (Pure CSS) by Roman Bulatov (@XiBOR)
on CodePen.
Author: Roman Bulatov @XiBOR
Links: Source Code / Demo
Created on: January 16, 2017
Made with: HTML, CSS, JS
24. Hexagonal Cycle
See the Pen
Hexagonal cycle by Bali Balo (@bali_balo)
on CodePen.
Author: Bali Balo @bali_balo
Links: Source Code / Demo
Created on: June 17, 2017
Made with: HTML, CSS(SCSS)
25. Red Hexagon In CSS
See the Pen
HeCSSagon by Shaw (@shshaw)
on CodePen.
Author: Shaw @shshaw
Links: Source Code / Demo
Created on: August 7, 2018
Made with: HTML, CSS(SCSS)
26. CSS Responsive Grid Of Hexagons
See the Pen
CSS responsive grid of hexagons by web-tiki (@web-tiki)
on CodePen.
Author: web-tiki @web-tiki
Links: Source Code / Demo
Created on: July 21, 2014
Made with: HTML, CSS
27. Rocketbank Hexagon
See the Pen
Rocketbank hexagon by Mike Petrov (@mike_petrov)
on CodePen.
Author: Mike Petrov @mike_petrov
Links: Source Code / Demo
Created on: May 12, 2019
Made with: HTML, CSS
28. CSS Hexagons
See the Pen
CSS Hexagons by Will Boyd (@lonekorean)
on CodePen.
Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: July 10, 2016
Made with: HTML, CSS(SCSS)
29. Responsive Hexagon Grid
See the Pen
Responsive Hexagon Grid by Kevin Dee Davis (@kevindeedavis)
on CodePen.
Author: Kevin Dee Davis @kevindeedavis
Links: Source Code / Demo
Created on: August 17, 2018
Made with: HTML, CSS(SCSS)
30. Folding Shapes CSS Hover Effects
See the Pen
Folding Shapes CSS hover effects by Andrew Rubin (@andyranged)
on CodePen.
Author: Andrew Rubin @andyranged
Links: Source Code / Demo
Created on: October 22, 2017
Made with: HTML, CSS
31. Hexagon Flip Using HTML & CSS
See the Pen
Hexagon Flip Using HTML & CSS by AKHIL (@akhilganga)
on CodePen.
Author: AKHIL @akhilganga
Links: Source Code / Demo
Created on: December 26, 2019
Made with: HTML, CSS
32. Hexagonal Button
See the Pen
Hexagonal Button by Franco Bouly (@rayfranco)
on CodePen.
Author: Franco Bouly @rayfranco
Links: Source Code / Demo
Created on: March 18, 2014
Made with: HTML(Pug), CSS(SCSS)
33. Hexagon
See the Pen
ABCDE by Ivan Bogachev (@sfi0zy)
on CodePen.
Author: Ivan Bogachev @sfi0zy
Links: Source Code / Demo
Created on: January 17, 2020
Made with: HTML(Pug), CSS (Less)
34. Different Styled Hexagon SVGs With CSS
See the Pen
Different Styled Heaxgon SVGs with CSS by Amber Weinberg (@amberweinberg)
on CodePen.
Author: Amber Weinberg @amberweinberg
Links: Source Code / Demo
Created on: September 30, 2019
Made with: HTML, CSS
35. Hive Photo Gallery Grid
See the Pen
Hive Photo Gallery Grid by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: January 21, 2020
Made with: HTML (Pug), CSS (SCSS)
36. Hexagon With Image Inside
See the Pen
Hexagon with Image Inside by Chris Johnson (@chrisjdesigner)
on CodePen.
Author: Chris Johnson @chrisjdesigner
Links: Source Code / Demo
Created on: August 8, 2019
Made with: HTML, CSS(SCSS)
37. Hexa team
See the Pen
Hexa team by Shramee (@shramee)
on CodePen.
Author: Shramee @shramee
Links: Source Code / Demo
Created on: July 21, 2021
Made with: HTML, CSS(SCSS)
38. Creative Hexagon with Hover Effect
See the Pen
Creative Hexagon with Hover Effect by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: February 25, 2020
Made with: HTML, CSS
39. Neon Hexagon
See the Pen
Neon Hexagon by ⱧɎ₱ɆⱤ₮ɆӾ₮ ₳₴₴₳₴₴ł₦ (@Hyperdude)
on CodePen.
Author: ⱧɎ₱ɆⱤ₮ɆӾ₮ ₳₴₴₳₴₴ł₦ @Hyperdude
Links: Source Code / Demo
Created on: July 2, 2021
Made with: HTML, CSS(SCSS)
40. SCSS Hexagonal Flex Grid
See the Pen
SCSS Hexagonal Flex Grid by mono (@monokultur)
on CodePen.
Author: mono @monokultur
Links: Source Code / Demo
Created on: February 9, 2017
Made with: HTML, CSS(SCSS)
41. Hexagonal Spider Web Animation
See the Pen
Hexagonal Spider Web Animation by Guillermo (@gmesyngier)
on CodePen.
Author: Guillermo @gmesyngier
Links: Source Code / Demo
Created on: January 4, 2017
Made with: HTML, CSS(Stylus)
42. Animated SVG Hexagons
See the Pen
Animated SVG Hexagons by Wesley Lima (@wusley)
on CodePen.
Author: Wesley Lima @wusley
Links: Source Code / Demo
Created on: July 12, 2019
Made with: HTML, CSS(SCSS)
43. Pure CSS Hexagon
See the Pen
Pure CSS Hexagon by Gil Perez (@gil)
on CodePen.
Author: Gil Perez @gil
Links: Source Code / Demo
Created on: August 31, 2016
Made with: HTML, CSS(SCSS)
44. Hexagonal
See the Pen
Hexagonal by Amos (@bad_printer)
on CodePen.
Author: Amos @bad_printer
Links: Source Code / Demo
Created on: June 18, 2015
Made with: HTML, CSS(SCSS)
45. Hex Links!
See the Pen
Hex Links! by Tim Aikens (@timaikens)
on CodePen.
Author: Tim Aikens @timaikens
Links: Source Code / Demo
Created on: April 21, 2015
Made with: HTML, CSS
46. Floating hexagonal blocks
See the Pen
Floating hexagonal blocks by terry gyde (@pathogen)
on CodePen.
Author: terry gyde @pathogenr
Links: Source Code / Demo
Created on: September 27, 2015
Made with: HTML(Pug), CSS(SCSS), JS(Babel)