45+ CSS Hexagons

Last Updated on by in CSS Examples
CSS Hexagons

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)

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.