HTML + CSSBackgrounds

Honeycomb background

A full-screen honeycomb where hexagons light up at random, like a living grid, in pure HTML and CSS.

Settings

1x
1x
1

Code

<div class="pt-hex"><p><i style="--t:4.0s;--dl:1.8"></i><i style="--t:8.8s;--dl:1.3"></i><i style="--t:8.8s;--dl:9.7"></i><i style="--t:6.5s;--dl:1.1"></i><i style="--t:4.7s;--dl:4.1"></i><i style="--t:6.7s;--dl:6.7"></i><i style="--t:6.9s;--dl:3.1"></i><i style="--t:6.9s;--dl:7.7"></i><i style="--t:4.2s;--dl:0.7"></i><i style="--t:6.7s;--dl:6.0"></i><i style="--t:8.5s;--dl:1.8"></i><i style="--t:5.8s;--dl:3.7"></i><i style="--t:7.7s;--dl:7.4"></i><i style="--t:9.0s;--dl:8.9"></i><i style="--t:8.5s;--dl:3.1"></i><i style="--t:5.2s;--dl:8.6"></i><i style="--t:6.2s;--dl:4.3"></i><i style="--t:7.7s;--dl:9.5"></i></p><p><i style="--t:8.2s;--dl:8.1"></i><i style="--t:9.5s;--dl:2.9"></i><i style="--t:5.3s;--dl:8.4"></i><i style="--t:7.0s;--dl:7.8"></i><i style="--t:9.2s;--dl:6.5"></i><i style="--t:8.1s;--dl:9.6"></i><i style="--t:6.7s;--dl:9.3"></i><i style="--t:9.4s;--dl:3.0"></i><i style="--t:4.8s;--dl:4.7"></i><i style="--t:5.4s;--dl:5.0"></i><i style="--t:6.3s;--dl:0.8"></i><i style="--t:5.1s;--dl:5.5"></i><i style="--t:4.9s;--dl:5.4"></i><i style="--t:7.9s;--dl:8.7"></i><i style="--t:9.3s;--dl:4.5"></i><i style="--t:6.4s;--dl:8.2"></i><i style="--t:7.2s;--dl:6.6"></i><i style="--t:7.0s;--dl:4.6"></i></p><p><i style="--t:7.0s;--dl:2.2"></i><i style="--t:8.6s;--dl:1.8"></i><i style="--t:6.8s;--dl:4.5"></i><i style="--t:9.1s;--dl:9.3"></i><i style="--t:6.7s;--dl:1.3"></i><i style="--t:4.9s;--dl:2.0"></i><i style="--t:8.9s;--dl:6.7"></i><i style="--t:7.8s;--dl:5.3"></i><i style="--t:10.0s;--dl:10.0"></i><i style="--t:4.6s;--dl:7.6"></i><i style="--t:5.0s;--dl:6.2"></i><i style="--t:5.9s;--dl:6.1"></i><i style="--t:8.3s;--dl:5.7"></i><i style="--t:6.5s;--dl:7.4"></i><i style="--t:9.0s;--dl:2.1"></i><i style="--t:7.5s;--dl:6.0"></i><i style="--t:6.3s;--dl:1.4"></i><i style="--t:5.3s;--dl:3.0"></i></p><p><i style="--t:8.9s;--dl:4.9"></i><i style="--t:7.6s;--dl:7.3"></i><i style="--t:9.9s;--dl:0.2"></i><i style="--t:7.7s;--dl:5.8"></i><i style="--t:6.6s;--dl:9.1"></i><i style="--t:6.6s;--dl:1.7"></i><i style="--t:8.9s;--dl:4.7"></i><i style="--t:4.2s;--dl:7.3"></i><i style="--t:5.5s;--dl:3.9"></i><i style="--t:6.6s;--dl:1.6"></i><i style="--t:7.8s;--dl:8.6"></i><i style="--t:9.9s;--dl:8.7"></i><i style="--t:6.1s;--dl:1.3"></i><i style="--t:6.8s;--dl:4.9"></i><i style="--t:7.0s;--dl:3.3"></i><i style="--t:5.7s;--dl:6.1"></i><i style="--t:5.9s;--dl:6.0"></i><i style="--t:4.0s;--dl:3.3"></i></p><p><i style="--t:9.1s;--dl:6.8"></i><i style="--t:5.7s;--dl:0.8"></i><i style="--t:5.6s;--dl:4.0"></i><i style="--t:5.1s;--dl:6.5"></i><i style="--t:4.8s;--dl:8.0"></i><i style="--t:9.2s;--dl:6.6"></i><i style="--t:4.8s;--dl:8.6"></i><i style="--t:7.6s;--dl:2.3"></i><i style="--t:5.4s;--dl:2.9"></i><i style="--t:7.0s;--dl:8.3"></i><i style="--t:5.5s;--dl:1.2"></i><i style="--t:9.0s;--dl:2.8"></i><i style="--t:7.2s;--dl:6.9"></i><i style="--t:5.1s;--dl:9.7"></i><i style="--t:9.0s;--dl:4.6"></i><i style="--t:7.8s;--dl:2.9"></i><i style="--t:5.7s;--dl:2.2"></i><i style="--t:4.3s;--dl:1.0"></i></p><p><i style="--t:4.9s;--dl:0.7"></i><i style="--t:5.7s;--dl:3.9"></i><i style="--t:9.2s;--dl:9.4"></i><i style="--t:4.7s;--dl:1.8"></i><i style="--t:5.5s;--dl:7.5"></i><i style="--t:5.4s;--dl:5.5"></i><i style="--t:6.4s;--dl:3.6"></i><i style="--t:8.8s;--dl:1.6"></i><i style="--t:7.4s;--dl:6.9"></i><i style="--t:9.7s;--dl:4.2"></i><i style="--t:5.2s;--dl:3.2"></i><i style="--t:9.3s;--dl:5.9"></i><i style="--t:8.0s;--dl:6.0"></i><i style="--t:9.0s;--dl:6.3"></i><i style="--t:9.6s;--dl:7.3"></i><i style="--t:5.1s;--dl:8.9"></i><i style="--t:9.8s;--dl:5.7"></i><i style="--t:8.9s;--dl:4.4"></i></p><p><i style="--t:5.2s;--dl:3.6"></i><i style="--t:8.1s;--dl:1.7"></i><i style="--t:9.8s;--dl:7.2"></i><i style="--t:5.0s;--dl:5.9"></i><i style="--t:6.5s;--dl:4.0"></i><i style="--t:4.1s;--dl:1.4"></i><i style="--t:8.8s;--dl:2.5"></i><i style="--t:8.8s;--dl:0.1"></i><i style="--t:9.4s;--dl:2.5"></i><i style="--t:4.3s;--dl:9.0"></i><i style="--t:9.6s;--dl:0.1"></i><i style="--t:9.0s;--dl:6.3"></i><i style="--t:9.6s;--dl:9.6"></i><i style="--t:5.2s;--dl:2.6"></i><i style="--t:5.7s;--dl:9.0"></i><i style="--t:10.0s;--dl:3.8"></i><i style="--t:8.0s;--dl:5.5"></i><i style="--t:4.0s;--dl:0.1"></i></p><p><i style="--t:9.8s;--dl:5.5"></i><i style="--t:9.2s;--dl:7.6"></i><i style="--t:4.9s;--dl:1.3"></i><i style="--t:9.1s;--dl:5.3"></i><i style="--t:6.3s;--dl:4.6"></i><i style="--t:9.1s;--dl:7.4"></i><i style="--t:9.3s;--dl:6.7"></i><i style="--t:9.5s;--dl:9.2"></i><i style="--t:8.4s;--dl:5.0"></i><i style="--t:7.4s;--dl:5.3"></i><i style="--t:7.1s;--dl:4.2"></i><i style="--t:5.4s;--dl:5.6"></i><i style="--t:10.0s;--dl:0.5"></i><i style="--t:8.8s;--dl:5.4"></i><i style="--t:8.5s;--dl:1.0"></i><i style="--t:8.4s;--dl:8.5"></i><i style="--t:5.2s;--dl:3.8"></i><i style="--t:5.4s;--dl:5.8"></i></p><p><i style="--t:6.5s;--dl:5.9"></i><i style="--t:6.7s;--dl:4.2"></i><i style="--t:9.3s;--dl:3.1"></i><i style="--t:4.6s;--dl:9.1"></i><i style="--t:9.8s;--dl:7.1"></i><i style="--t:5.6s;--dl:1.5"></i><i style="--t:5.6s;--dl:7.8"></i><i style="--t:4.2s;--dl:7.0"></i><i style="--t:7.0s;--dl:3.8"></i><i style="--t:4.3s;--dl:8.7"></i><i style="--t:5.8s;--dl:0.6"></i><i style="--t:9.2s;--dl:7.4"></i><i style="--t:9.9s;--dl:2.9"></i><i style="--t:9.8s;--dl:3.3"></i><i style="--t:5.7s;--dl:4.6"></i><i style="--t:6.2s;--dl:7.4"></i><i style="--t:5.9s;--dl:0.1"></i><i style="--t:7.9s;--dl:8.4"></i></p><p><i style="--t:5.3s;--dl:7.6"></i><i style="--t:8.8s;--dl:2.9"></i><i style="--t:8.0s;--dl:8.8"></i><i style="--t:6.0s;--dl:3.3"></i><i style="--t:7.2s;--dl:0.2"></i><i style="--t:5.7s;--dl:4.9"></i><i style="--t:7.1s;--dl:7.0"></i><i style="--t:6.0s;--dl:2.9"></i><i style="--t:4.3s;--dl:0.9"></i><i style="--t:7.8s;--dl:5.6"></i><i style="--t:6.9s;--dl:5.0"></i><i style="--t:4.9s;--dl:4.6"></i><i style="--t:9.4s;--dl:1.4"></i><i style="--t:7.9s;--dl:9.5"></i><i style="--t:7.7s;--dl:4.5"></i><i style="--t:9.3s;--dl:3.5"></i><i style="--t:4.2s;--dl:0.9"></i><i style="--t:9.3s;--dl:7.1"></i></p><p><i style="--t:6.8s;--dl:1.3"></i><i style="--t:6.8s;--dl:7.9"></i><i style="--t:9.5s;--dl:2.6"></i><i style="--t:6.4s;--dl:7.3"></i><i style="--t:5.3s;--dl:6.0"></i><i style="--t:5.5s;--dl:1.0"></i><i style="--t:6.1s;--dl:2.0"></i><i style="--t:6.7s;--dl:3.6"></i><i style="--t:6.2s;--dl:9.3"></i><i style="--t:5.5s;--dl:7.7"></i><i style="--t:9.5s;--dl:2.6"></i><i style="--t:7.1s;--dl:7.8"></i><i style="--t:7.2s;--dl:0.4"></i><i style="--t:6.8s;--dl:7.2"></i><i style="--t:6.8s;--dl:1.3"></i><i style="--t:4.3s;--dl:7.2"></i><i style="--t:9.6s;--dl:0.6"></i><i style="--t:5.6s;--dl:6.7"></i></p><p><i style="--t:7.6s;--dl:9.0"></i><i style="--t:7.0s;--dl:9.4"></i><i style="--t:6.8s;--dl:6.4"></i><i style="--t:9.6s;--dl:3.8"></i><i style="--t:9.1s;--dl:5.2"></i><i style="--t:6.1s;--dl:3.5"></i><i style="--t:5.0s;--dl:7.9"></i><i style="--t:4.5s;--dl:9.3"></i><i style="--t:8.1s;--dl:9.8"></i><i style="--t:9.9s;--dl:5.0"></i><i style="--t:7.8s;--dl:4.4"></i><i style="--t:7.1s;--dl:6.7"></i><i style="--t:6.7s;--dl:3.0"></i><i style="--t:4.7s;--dl:6.8"></i><i style="--t:4.1s;--dl:3.5"></i><i style="--t:7.4s;--dl:5.0"></i><i style="--t:5.6s;--dl:2.0"></i><i style="--t:4.8s;--dl:9.8"></i></p></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Backgrounds

Where to use it

A grid of hexagons blinking on and off has a techy, sci-fi feel, perfect behind the hero of a cybersecurity company, the landing page of a hackathon or the main menu of a strategy game. The cells light up randomly in your colors, and the edges fade into the background so the center stays clean for your content.

Raise the scale for bigger, calmer cells behind long headlines, or lower it for a denser texture. Slower speeds keep it from competing with the text. If you want a matching loader, the hexagon ring in this library shares the look.