Pure CSS Hexagons
CSS hexagons are six-sided shapes and honeycomb grids drawn with clip-path or pseudo-elements, with no images or SVG required.
7 free examples, most liked first. Click one to preview it and copy the code.
Hexagon Loader Spinner
by @admin · Hexagons
Hexagon Profile Badge
by @admin · Cards
Hexagon Outline Pulse
by @admin · Css Animation
Hexagon Hover Grid
by @admin · Hexagons
Hexagon Flip Tiles
by @admin · Hexagons
Honeycomb Cluster
by @admin · Css Animation
Hexagon Stat Badge
by @admin · Cards
Hexagons FAQ
How do I draw a hexagon in CSS?
Apply a clip-path polygon with six points to a square element, or build it from rotated pseudo-elements. The hexagon examples here show both.
How do I use these pure CSS hexagons?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.