Free Background
Neon Hexagonal Wave Pulse
An isometric hexagonal matrix with concentric radial pulse illumination waves travelling across coordinates.
Colours in this gradient
#050814#3b82f6#06b6d4#ffffff
background: ;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-pulse-stage">
<div class="hex-pulse-mesh"></div>
<div class="hex-pulse-overlay"></div>
<div class="hex-pulse-content">
<div class="hpp-badge">Quantum Lattice</div>
<h1>Hexagonal Field</h1>
<p>Concentric resonant energy waves sweeping across an interconnected molecular grid.</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 neon isometric hexagonal pulse field background in pure HTML and CSS. Requirements: - Deep dark space background (#050814). - Tessellated geometric hexagon lattice created using repeating multi-stop linear gradients. - Diagonal endless scrolling animation keyframe. - Dark radial vignette overlay keeping center typography legible. - Zero JavaScript. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Combine 30deg, 60deg and 150deg linear gradients with repeating background-size: 80px 140px.
- 2
Animate background-position diagonally across keyframes.
- 3
Apply radial vignette mask.
Customisation tips
- Using background-size: 80px 140px maintains perfect geometric 6-sided symmetry.