Circuit board pattern

A pure CSS circuit board background using layered linear gradients. No images, no SVG — just gradients.

Widely Supported

colorno-js

Quick implementation

.circuit-board {
  background:
    radial-gradient(circle, oklch(0.65 0.18 165) 1.5px, transparent 1.5px),
    radial-gradient(circle, oklch(0.65 0.18 165) 1px, transparent 1px),
    linear-gradient(0deg, oklch(0.45 0.12 170) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.45 0.12 170) 1px, transparent 1px),
    linear-gradient(45deg, oklch(0.35 0.10 175) 0.5px, transparent 0.5px),
    oklch(0.12 0.02 200);
  background-size:
    60px 60px,
    30px 30px,
    30px 30px,
    30px 30px,
    15px 15px,
    100% 100%;
  background-position:
    15px 15px,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS pattern library.

Goal: A pure CSS circuit board background pattern — no images, no SVG, only CSS gradients.

Technical constraints:
- Use multiple background layers: radial-gradient for solder pads, linear-gradient for horizontal and vertical traces, and a diagonal linear-gradient for angled traces.
- Stack 5 gradient layers in the background shorthand property.
- Use background-size to tile each layer independently — pads at 60px, grid lines at 30px, diagonals at 15px.
- Use background-position to offset pad placement from the grid intersections.
- All colors must use oklch() — greens and teals for traces on a dark surface.
- No JavaScript, no SVG, no external images.

Framework variant (pick one):
A) Vanilla CSS class that can be applied to any container element.
B) React component — accept traceColor and padSize as optional props via CSS custom properties.

Edge cases to handle:
- Pattern must tile seamlessly at any container size.
- Ensure sufficient contrast between trace colors and the dark background.
- Keep total number of gradient layers under 6 for GPU performance.
- Provide a CSS custom property variant for easy color theming.

Return CSS.

Why this matters in 2026

Decorative backgrounds are everywhere — hero sections, card overlays, loading states. A pure CSS circuit board pattern eliminates an HTTP request for an SVG or PNG tile while giving you full control over color, density, and scale through CSS properties alone. With oklch() you can theme the traces to match any brand palette in seconds.

The logic

The pattern stacks five gradient layers in the background shorthand, painted bottom-to-top. The base layer is a solid oklch(0.12 0.02 200) dark surface. On top sit two linear-gradient layers — one at 0deg and one at 90deg — drawing the horizontal and vertical trace lines at 1px width. A diagonal linear-gradient(45deg) adds angled traces at half-pixel width for subtlety. Finally, two radial-gradient layers place circular solder pads at different densities. Each layer gets its own background-size so they tile at different intervals, creating the organic complexity of a real PCB from simple repeating units.

Accessibility & performance

Gradient-only backgrounds are purely decorative and require no alt text or ARIA labeling. Because each gradient is rasterized by the GPU during paint, five layers is well within the performance budget — the browser composites them in a single pass with no layout or reflow cost. Avoid exceeding eight to ten gradient layers, as each adds a texture upload to the GPU. If the pattern sits behind text, ensure the trace colors stay dim enough to maintain WCAG contrast — the oklch lightness channel makes this trivial to verify and adjust.