Background Pattern Generator

Create beautiful CSS background patterns with gradients for unique designs.

Preview
Generated Code
background: radial-gradient(circle, rgba(59, 130, 246, 1) 20%, rgba(255, 255, 255, 1) 20%);
background-size: 40px 40px;
background-position: 0 0;

/* Pattern variations */
/* Dots Pattern */
background: radial-gradient(circle, #3b82f6 20%, transparent 20%);
background-size: 40px 40px;

/* Grid Pattern */
background: linear-gradient(#3b82f6 2px, transparent 2px),
            linear-gradient(90deg, #3b82f6 2px, transparent 2px);
background-size: 40px 40px;

/* Stripes Pattern */
background: repeating-linear-gradient(
  45deg,
  #3b82f6,
  #3b82f6 20px,
  #ffffff 20px,
  #ffffff 40px
);

/* Checkerboard Pattern */
background: linear-gradient(45deg, #3b82f6 25%, transparent 25%),
            linear-gradient(-45deg, #3b82f6 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #ffffff 75%),
            linear-gradient(-45deg, transparent 75%, #ffffff 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
Pattern Settings
Pattern Presets
Click any preset to apply it