Full Preview

Polka Dots

Colors

Background

Pattern

Settings

Opacity0.50

Spacing28px

Stroke Width1.5px

Fade Effect

Export PNG

CSS Output

background-color: #0f172a;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'3.36'%20fill%3D'rgba(99%2C102%2C241%2C0.5)'%2F%3E%3C%2Fsvg%3E");
background-size: 28px 28px;

Presets

Patterns

How to use these patterns?

See it live on CodePen

Pick & customize

Select a pattern from the grid, then adjust the background color, pattern color, opacity, spacing, and stroke width using the controls on the left.

Copy the CSS

Click Copy CSS to get the three-property snippet, or Tailwind for an inline React style object. Paste it directly into your project.

Apply it in your code

The easiest way is a fixed full-screen <div> inside your <body> — see the snippet below.

Plain HTML / CSS

HTML

<!-- In your HTML -->
<div class="bg-pattern"></div>

CSS

.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* ← paste the copied CSS here */
  background-color: #0f172a;
  background-image: url("data:image/svg+xml,...");
  background-size: 28px 28px;
}

React / Next.js (Tailwind inline)

// In your layout.tsx or page.tsx
export default function Layout({ children }) {
  return (
    <>
      {/* ← paste the copied Tailwind style here */}
      <div
        className="fixed inset-0 -z-10"
        style={{
          backgroundColor: '#0f172a',
          backgroundImage: `url("data:...")`,
          backgroundSize: '28px 28px',
        }}
      />
      {children}
    </>
  );
}