Futuristic Honeycomb Grid Backdrop

Colours in this gradient

• #080c14
• #0284c7
• #38bdf8
• #ffffff

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="hex-pattern-stage">
  <div class="hex-grid-layer"></div>
  <div class="hex-vignette-layer"></div>
  <div class="hex-pattern-content">
    <div class="hp-badge">Cyber Grid Architecture</div>
    <h1>Hexagonal Matrix</h1>
    <p>Modular tessellated geometry engineered for deep tech and Web3 enterprise platforms.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a futuristic dark honeycomb grid background in pure HTML and CSS.

Requirements:
- Seamless tessellated hexagonal texture using CSS linear-gradient angles (60deg and 120deg).
- Center starlight dot accents.
- Radial dark vignette keeping center typography legible.
- Zero JavaScript, lightweight, and scalable.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Combine 60deg and 120deg linear gradients with repeating background-size.

2. 2

   Add radial-gradient dots at the vertex intersections.

3. 3

   Layer a radial vignette mask over top to soften the pattern toward the edges.

Customisation tips

• Using background-size: 56px 97px preserves mathematical hexagonal proportions (sqrt(3)/2).

More backgrounds