CSS pattern backgrounds.

What the copied snippet contains

Every pattern copies as the same structure: a wrapper div with Tailwind classes (usually min-h-screen w-full relative, plus a base background color), and inside it an empty div with absolute inset-0 z-0 that carries the pattern in an inline style object. The style object holds the gradient layers in backgroundImage and, depending on the pattern, backgroundSize, a mask, or a blur filter.

Paste the snippet where the background should appear and replace the Your Content/Components comment with your own markup. The pattern layer is absolutely positioned, so keep the relative class on the wrapper; without it the layer stretches to the nearest positioned ancestor, often the whole page. Colors and sizes are edited directly in the copied code.

<div className="min-h-screen w-full bg-[#f8fafc] relative">
  {/* Top Fade Grid Background */}
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        linear-gradient(to right, #e2e8f0 1px, transparent 1px),
        linear-gradient(to bottom, #e2e8f0 1px, transparent 1px)
      `,
      backgroundSize: "20px 30px",
      WebkitMaskImage:
        "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
      maskImage:
        "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)",
    }}
  />
  <main className="relative z-10">{/* your content */}</main>
</div>

Keeping your content above the pattern

The most common problem after pasting is content that seems to vanish or cannot be clicked. The pattern layer is positioned with z-index 0, and browsers paint positioned layers after ordinary, non-positioned content in the same container. So a plain heading or form placed after the layer is drawn underneath it.

Give the content wrapper position: relative (the relative class), as in the example above. It then paints in source order after the pattern. Adding z-10 makes the order explicit and survives later edits. For a section rather than a full page, replace min-h-screen with the height you need, and add overflow-hidden to the wrapper when the pattern uses a blur.

Converting to plain HTML and CSS

The snippet is JSX, but the background itself is ordinary CSS. For plain HTML, change className to class, move the style object into a stylesheet rule, and rename each property from camelCase to its CSS name: backgroundImage becomes background-image, backgroundSize becomes background-size, and WebkitMaskImage becomes -webkit-mask-image. The template literal backticks around multi-line values disappear, and the Tailwind classes on the wrapper become position: relative, a background color and a minimum height.

.grid-bg {
  position: relative;
  min-height: 100vh;
  background-color: #f8fafc;
}
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #e2e8f0 1px, transparent 1px),
    linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
  background-size: 20px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
}
.grid-bg > * {
  position: relative; /* keeps content above the ::before layer */
}

Adjusting a pattern

Most geometric patterns follow the same recipe, so a few values control the result.

• Cell size: background-size sets the width and height of one repeat. "20px 30px" draws cells 20px wide and 30px tall; use equal values for a square grid.
• Line weight and color: in linear-gradient(to right, #e2e8f0 1px, transparent 1px), the color is the line and 1px is its thickness. Change both numbers together.
• Dots: patterns built from radial-gradient(circle, color 1px, transparent 1px) get bigger dots from a larger radius, and sparser dots from a larger background-size.
• Fades: the mask-image ellipse controls where the pattern disappears. Move at 50% 0% to at 50% 100% to fade from the bottom instead, or enlarge 70% 60% to show more of the pattern.
• Dark mode: swap the line color for a translucent white, such as rgba(255,255,255,0.08), and darken the wrapper's base color.

Browser support, performance and readability

Gradient backgrounds work in every current browser. The masked patterns include both mask-image and -webkit-mask-image: the unprefixed property arrived in Chrome and Edge 120, Safari 15.4 and Firefox 53, so keep the prefixed line for older Chromium and Safari versions.

Several glow patterns in the Effects group put filter: blur(80px) on a full-size layer. A large blur costs more to paint than a plain gradient, and the cost comes back whenever the element resizes or animates. If a page feels heavy, build the glow with a wider transparent stop in the gradient instead of a blur. The blur also softens the layer's edges, which is why overflow-hidden on the wrapper keeps the glow tidy.

Patterns are decorative and are not announced by screen readers. The open preview shows sample text in black or white to suggest a text color, but check contrast with your actual text. Fine grids and dot fields directly behind long paragraphs make text harder to read; a faded variant or a solid panel behind the text works better.

Questions

Can I use these patterns without React or Tailwind?

Yes. The pattern is plain CSS inside a JSX style object. Change className to class, convert the style keys from camelCase to CSS property names, and put them in a stylesheet rule, either on a child element or on a ::before pseudo-element as in the example above.

Why is my content hidden behind the pattern?

The pattern layer is absolutely positioned with z-index 0, and positioned layers paint above non-positioned content. Add relative (and optionally z-10) to the element that wraps your content.

How do I make the grid bigger or change its color?

Change background-size for the cell size and the color in each linear-gradient for the line color. The 1px values in the gradient set the line thickness.

Can I use a pattern on one section instead of the whole page?

Yes. Replace min-h-screen on the wrapper with the height or padding your section needs. The pattern layer uses inset-0, so it always fills its wrapper.