CSS & SVG Pattern Generator

Design seamless background patterns. Customize colors, scale, and density, and copy the inline CSS or raw SVG.

Pattern Style

Pattern Color

Background Color

Pattern Size40px

Dot Radius4px

Pattern Opacity30%

Real-time pattern rendering using highly efficient inline SVGs. Responsive and perfectly aligned.

CSS Background Code

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

Raw SVG XML Code

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>