UI Components Easy

Grid Pattern

An SVG-based grid pattern background with customizable size, color, and stroke width via CSS custom properties. Perfect for dark-themed hero sections and landing pages.

Open in Lab

css javascript vue svelte

Targets: TS JS HTML React Vue Svelte

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  background: #000;
}

/* --- Grid pattern container --- */
.grid-pattern {
  --grid-size: 40px;
  --grid-color: rgba(255, 255, 255, 0.08);
  --grid-stroke: 1;

  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #0a0a0a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: var(--grid-size) var(--grid-size);
  overflow: hidden;
}

/* Radial fade at edges to blend the grid */
.grid-fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, #0a0a0a 100%);
  pointer-events: none;
}

/* --- Centered content --- */
.grid-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 480px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.grid-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

.grid-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fafafa;
}

.grid-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #71717a;
  max-width: 380px;
}

// Grid Pattern — optional: dynamically update the SVG grid when CSS vars change.
(function () {
  "use strict";

  const container = document.querySelector(".grid-pattern");
  if (!container) return;

  /**
   * Rebuild the background-image SVG from current CSS custom properties.
   * Call this after programmatically changing --grid-size, --grid-color, or --grid-stroke.
   */
  function updateGrid() {
    const style = getComputedStyle(container);
    const size = parseInt(style.getPropertyValue("--grid-size"), 10) || 40;
    const color = style.getPropertyValue("--grid-color").trim() || "rgba(255,255,255,0.08)";
    const stroke = style.getPropertyValue("--grid-stroke").trim() || "1";

    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><path d='M ${size} 0 L 0 0 0 ${size}' fill='none' stroke='${color}' stroke-width='${stroke}'/></svg>`;
    const encoded = encodeURIComponent(svg).replace(/'/g, "%27");

    container.style.backgroundImage = `url("data:image/svg+xml,${encoded}")`;
    container.style.backgroundSize = `${size}px ${size}px`;
  }

  // Initial sync
  updateGrid();

  // Expose for external use
  window.updateGridPattern = updateGrid;
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Grid Pattern</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="grid-pattern">
    <div class="grid-fade"></div>
    <div class="grid-content">
      <span class="grid-badge">Background</span>
      <h1 class="grid-title">Grid Pattern</h1>
      <p class="grid-description">
        A minimal SVG-based grid background with customizable size, color, and
        stroke width via CSS custom properties.
      </p>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

import { type CSSProperties, type ReactNode } from "react";

interface GridPatternProps {
  /** Grid cell size in pixels */
  size?: number;
  /** SVG stroke color */
  color?: string;
  /** SVG stroke width */
  strokeWidth?: number;
  /** Extra CSS class names */
  className?: string;
  /** Overlay children on top of the grid */
  children?: ReactNode;
}

export function GridPattern({
  size = 40,
  color = "rgba(255,255,255,0.08)",
  strokeWidth = 1,
  className = "",
  children,
}: GridPatternProps) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><path d='M ${size} 0 L 0 0 0 ${size}' fill='none' stroke='${color}' stroke-width='${strokeWidth}'/></svg>`;
  const encoded = encodeURIComponent(svg).replace(/'/g, "%27");

  const containerStyle: CSSProperties = {
    position: "relative",
    width: "100%",
    minHeight: "100vh",
    display: "grid",
    placeItems: "center",
    backgroundColor: "#0a0a0a",
    backgroundImage: `url("data:image/svg+xml,${encoded}")`,
    backgroundSize: `${size}px ${size}px`,
    overflow: "hidden",
  };

  const fadeStyle: CSSProperties = {
    position: "absolute",
    inset: 0,
    background: "radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, #0a0a0a 100%)",
    pointerEvents: "none",
  };

  const contentStyle: CSSProperties = {
    position: "relative",
    zIndex: 1,
  };

  return (
    <div className={className} style={containerStyle}>
      <div style={fadeStyle} />
      <div style={contentStyle}>{children}</div>
    </div>
  );
}

// Demo usage
export default function GridPatternDemo() {
  return (
    <GridPattern size={40} color="rgba(255,255,255,0.08)" strokeWidth={1}>
      <div
        style={{
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "1rem",
          padding: "2rem",
        }}
      >
        <span
          style={{
            fontSize: "0.75rem",
            fontWeight: 600,
            textTransform: "uppercase",
            letterSpacing: "0.1em",
            padding: "0.3rem 0.85rem",
            borderRadius: "999px",
            background: "rgba(255,255,255,0.06)",
            border: "1px solid rgba(255,255,255,0.1)",
            color: "#a1a1aa",
          }}
        >
          Background
        </span>
        <h1
          style={{
            fontSize: "2.5rem",
            fontWeight: 800,
            letterSpacing: "-0.03em",
            lineHeight: 1.1,
            color: "#fafafa",
            fontFamily: "system-ui, -apple-system, sans-serif",
          }}
        >
          Grid Pattern
        </h1>
        <p
          style={{
            fontSize: "1rem",
            lineHeight: 1.7,
            color: "#71717a",
            maxWidth: 380,
            fontFamily: "system-ui, -apple-system, sans-serif",
          }}
        >
          A minimal SVG-based grid background with customizable size, color, and stroke width via
          CSS custom properties.
        </p>
      </div>
    </GridPattern>
  );
}

<script setup>
import { computed } from 'vue'
const props = withDefaults(defineProps<{ size?: number; color?: string; strokeWidth?: number }>(), { size: 40, color: "rgba(255,255,255,0.08)", strokeWidth: 1 })
const bgImage = computed(() => {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${props.size}' height='${props.size}'><path d='M ${props.size} 0 L 0 0 0 ${props.size}' fill='none' stroke='${props.color}' stroke-width='${props.strokeWidth}'/></svg>`
  return `url("data:image/svg+xml,${encodeURIComponent(svg).replace(/'/g, "%27")}")`
})
</script>
<template>
  <div :style="{ position:'relative', width:'100%', minHeight:'100vh', display:'grid', placeItems:'center', backgroundColor:'#0a0a0a', backgroundImage: bgImage, backgroundSize: props.size+'px '+props.size+'px', overflow:'hidden' }">
    <div style="position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 30%,#0a0a0a 100%);pointer-events:none"></div>
    <div style="position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem">
      <span style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding:0.3rem 0.85rem;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#a1a1aa">Background</span>
      <h1 style="font-size:2.5rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:#fafafa;font-family:system-ui,-apple-system,sans-serif">Grid Pattern</h1>
      <p style="font-size:1rem;line-height:1.7;color:#71717a;max-width:380px;font-family:system-ui,-apple-system,sans-serif">A minimal SVG-based grid background with customizable size, color, and stroke width.</p>
    </div>
  </div>
</template>

<script>
export let size = 40;
export let color = "rgba(255,255,255,0.08)";
export let strokeWidth = 1;
$: svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><path d='M ${size} 0 L 0 0 0 ${size}' fill='none' stroke='${color}' stroke-width='${strokeWidth}'/></svg>`;
$: encoded = encodeURIComponent(svg).replace(/'/g, "%27");
</script>
<div style="position:relative;width:100%;min-height:100vh;display:grid;place-items:center;background-color:#0a0a0a;background-image:url('data:image/svg+xml,{encoded}');background-size:{size}px {size}px;overflow:hidden">
  <div style="position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 30%,#0a0a0a 100%);pointer-events:none"></div>
  <div style="position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem">
    <span style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;padding:0.3rem 0.85rem;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#a1a1aa">Background</span>
    <h1 style="font-size:2.5rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:#fafafa;font-family:system-ui,-apple-system,sans-serif">Grid Pattern</h1>
    <p style="font-size:1rem;line-height:1.7;color:#71717a;max-width:380px;font-family:system-ui,-apple-system,sans-serif">A minimal SVG-based grid background with customizable size, color, and stroke width.</p>
  </div>
</div>

Grid Pattern

A clean SVG-based grid pattern background built with CSS custom properties for full customization.

How it works

The pattern is created using an inline SVG encoded as a background-image data URI. CSS custom properties (--grid-size, --grid-color, --grid-stroke) control the grid dimensions, line color, and thickness without touching the markup.

Customization

Variable	Default	Description
`--grid-size`	`40px`	Cell width & height
`--grid-color`	`rgba(255,255,255,0.08)`	Line color
`--grid-stroke`	`1`	SVG stroke width

When to use it

Hero section backgrounds
Dashboard or admin panel backdrops
Landing page decorative layers
Behind feature card sections