⬛

Background Canvas

Generate beautiful web background patterns. Supports solid, gradient, grid, dots, waves, and more.

背景类型 / Pattern

主色 / Primary Color

辅色 / Secondary Color

渐变角度 / Angle: 135°

实时预览 / Live Preview

Preview Text

CSS 代码

background: linear-gradient(135deg, #6366f1, #ec4899);

How to Use

Choose a background pattern type from the available options: Solid Color, Linear Gradient, Radial Gradient, Grid/Dots, Stripes, Waves, or Noise/Grain. Each type has its own set of customization controls.
Customize your pattern by adjusting the primary and secondary colors, pattern size (spacing, thickness), gradient angle, and opacity. Live preview updates instantly so you can experiment freely until you get the perfect look.
Copy the generated CSS with one click. For gradient patterns, you get a ready-to-use `background` declaration. For CSS-based patterns (grid, dots, stripes), you get the full `background-image` with repeating gradients — no images or SVGs needed.

Do these background patterns use images?: No — all patterns are generated using pure CSS (linear-gradient, radial-gradient, repeating gradients). This means zero HTTP requests, instant rendering, and seamless scaling at any resolution. They're perfect for performance-sensitive websites.
Can I use these backgrounds with an overlay?: Yes — combine the generated background with a semi-transparent overlay color or gradient on top. The generator provides a preview of how the pattern looks on light and dark backgrounds so you can plan your content layer accordingly.
Are CSS background patterns responsive?: Absolutely. Since the patterns are defined in CSS rather than fixed-size images, they scale smoothly to any viewport width. You can adjust the pattern's `background-size` value to make it denser on mobile or sparser on desktop.