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