Free CSS background patterns in seconds
This CSS background pattern generator gives you 50 seamless patterns that you can customise and copy as clean CSS — no image files, no sign-up and no watermark. Pick a pattern, choose your colors, then adjust the size, thickness, opacity and rotation. Add a soft fade or a looping animation, preview it on a website hero, a card or a phone, and copy the code or download an image.
How to make a background pattern
- Choose a pattern from the library — search or filter by Dots, Lines, Grids, Stripes, Checks, Geometric, Shapes or 3D.
- Pick the pattern, background and accent colors, or tap a ready-made palette.
- Set the size, thickness and opacity; rotate it or add a fade if you like.
- Check it in the Website, Card and Phone previews.
- Copy the CSS, pure CSS gradients, Tailwind or SVG code — or download a seamless tile or a wallpaper.
50 patterns in 8 groups
| Group | Patterns |
|---|---|
| Dots | Polka dots, staggered dots, rings, bubbles, halftone, overlapping circles |
| Lines | Horizontal, vertical and diagonal lines, crosshatch, dashed, wavy, zigzag |
| Grids | Grid, graph paper, plus grid, cross dots, isometric grid |
| Stripes | Vertical, horizontal and diagonal stripes, candy stripes, pinstripes, chevron |
| Checks & plaid | Checkerboard, diamonds, gingham, tartan plaid, basket weave, argyle |
| Geometric | Triangles, rounded tiles, honeycomb, hexagons, nested squares, Swiss crosses, X marks, bricks, waves, fish scales |
| Shapes | Stars, hearts, quatrefoil, rainbow arches, confetti, sprinkles |
| 3D | 3D cubes, 3D pyramids, 3D gems |
What makes this pattern generator different
- Downloads, not just code — seamless SVG/PNG tiles for Canva, Figma and Photoshop, plus wallpapers for desktop, 4K, iPhone, Android, Instagram, YouTube and LinkedIn.
- Rotation and fade built into the CSS, so the pattern can sit softly behind a headline.
- Seamless animation with a reduced-motion fallback.
- Four code formats — CSS, pure CSS gradients, Tailwind config and raw SVG.
- Live mockups show the pattern on a website hero, a card and a phone before you use it.
- Share and save — every design has its own link and you can keep favourites in your browser.
How to add the pattern to your website
Copy the CSS and paste it into your stylesheet, then add the class to any element: <section class="pattern-background">. The pattern fills the whole element and repeats automatically. In WordPress, Elementor, Webflow or Shopify, paste the code into the custom CSS box and use the same class name.
Three ways to use your pattern
| Output | Best for | How |
|---|---|---|
| CSS (inline SVG) | Websites, landing pages, apps | Paste the code on any element — no image file, no extra HTTP request |
| Pure CSS gradients | The smallest code, CSS-only projects | Available for 15 simple patterns (dots, lines, grids, stripes, checks) |
| Tailwind | Tailwind CSS projects | Add the snippet to tailwind.config.js and use the class |
| SVG / PNG tile | Canva, Figma, Photoshop, PowerPoint | Download the seamless tile and fill a shape with it |
| Wallpaper | Desktop, phone, Instagram, YouTube, LinkedIn | Download at full size in PNG, JPG, WebP or SVG |
CSS gradients or inline SVG — which is better?
Both are pure CSS and need no image file. Gradient patterns are built from linear-gradient, radial-gradient and conic-gradient and are the lightest choice for dots, lines, grids and stripes. Inline SVG (a data:image/svg+xml URL) can draw any shape — hexagons, stars, hearts, waves, 3D cubes — stays razor sharp on retina screens and also supports rotation and fades. Every browser in use today supports both.
Make text readable on a pattern
- Keep pattern opacity low (10–30%) behind paragraphs, or use a subtle pattern such as dots or a grid.
- Use the Fade option so the pattern disappears behind your headline.
- Put text on a solid card on top of the pattern.
- Check the text and background colors with the WCAG contrast checker — aim for at least 4.5:1.
Dark mode in two lines
Create a second version with a dark background and a lighter pattern color (press ⇄ Swap or pick the Midnight palette), then switch it with a media query:
@media (prefers-color-scheme: dark) {
.pattern-background { /* paste the dark version here */ }
}Animated backgrounds without hurting performance
The animation moves the pattern by exactly one tile per loop, so it scrolls forever with no jump. It only animates background-position, and the code includes a prefers-reduced-motion rule that switches the movement off for visitors who ask for less motion. Use it on hero sections and banners rather than whole long pages.
Popular uses
- Hero sections and landing pages — dots, grids or waves at low opacity with a fade.
- Cards, pricing tables and empty states — a soft pattern instead of a flat grey box.
- Social media and YouTube backgrounds — download a 1080×1080 post, story or 2560×1440 banner.
- Packaging, gift wrap and stationery — download the seamless SVG tile and print it at any size.
- Presentations and product photos — a branded backdrop behind your slides or products.
Need a smooth color background instead? Try the CSS gradient generator, and build your brand colors with the color palette generator.