Background Pattern Generator

Create subtle, repeating background patterns like dots, grids, and lines. Great for adding texture to empty spaces without overwhelming the content.

Pattern Type

Colors

Pattern

Background

Gap / Size16px

Radius1px

Opacity20%

React / CSS Code

<div 
  className="w-full h-full"
  style={{
  backgroundColor: "transparent",
  backgroundImage: "radial-gradient(rgba(148,163,184,0.2) 1px, transparent 1px)",
  backgroundSize: "16px 16px"
  }}
/>

Features

Types: Dot matrix, Grid lines, Diagonal lines.
Customizable: Adjust color, background size (gap), thickness, and opacity.
CSS-First: Generates optimized backgroundImage CSS using gradients, ensuring lightweight and fast rendering.

Usage

For best results, wrap the output code in a container element or apply the styles directly to your layout wrapper.


// Example Grid Pattern
<div className='absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]' />

Note: The tool generates standard style objects for maximum browser compatibility and control over opacity.