Cybernetic PCB Circuit Board

Colours in this gradient

• #020b08
• #10b981
• #059669
• #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="pcb-stage">
  <div class="pcb-grid"></div>
  <div class="pcb-vignette"></div>
  <div class="pcb-content">
    <div class="pcb-badge">Hardware Architecture</div>
    <h1>Silicon Core</h1>
    <p>Orthogonal micro-trace interconnects designed for semiconductors, quantum processors, and FPGA tooling.</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 cyber printed circuit board (PCB) background in pure HTML and CSS.

Requirements:
- Dark emerald solder mask backdrop (#020b08).
- Orthogonal grid traces created with linear-gradient and radial-gradient solder pads.
- Vignette overlay ensuring center readability.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Combine two linear gradients and two offset radial gradients to form circuit paths with junction solder pads.

2. 2

   Add radial vignette to fade peripheral traces into the shadows.

Customisation tips

• Set background-size: 40px 40px to keep trace density tight and sharp.

More backgrounds