← All elements
<div class="hx"><div class="r"><i></i><i></i><i></i></div><div class="r o"><i></i><i></i><i></i></div><div class="r"><i></i><i></i><i></i></div></div>About this hexagon
A honeycomb of hexagons cut with clip-path, where each cell lights up and lifts when you hover over it.
How it works
Each cell is a rectangle clipped into a hexagon with a clip-path polygon. Every other row is shifted right by half a cell, and the rows overlap slightly with a negative margin, which creates the honeycomb pattern. Hovering lifts a cell and fills it with a gradient.
Ways to customise it
- Change the base and hover colours.
- Add cells to each row, keeping the odd row offset.
- Edit the cell width and height together.
Good to know
clip-path also clips the hover area, so the hover works only inside each hexagon. The grid is decorative unless you place content or links inside.
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.