CSS Background Pattern Generator

Make repeating website backgrounds from pure CSS, with no image file to host. Choose from 17 patterns, including stripes, polka dots, grids, graph paper, checkerboard, zigzag, bricks and waves. Set the size, thickness, angle and colours, then preview it as a full panel, a hero, a card or text fill. Copy the code as plain CSS, CSS variables, a one-line background or a Tailwind class. Add a fade or a looping motion if you like: it’s all in the code.

Nothing to upload. The patterns are made in your browser, and the code is yours to use.

How to make a CSS background pattern

1. Pick a pattern.
2. Set the size, thickness, angle and strength, and choose your colours. Tick Transparent background to lay it over something else.
3. Switch the preview to Hero, Card or Text fill to see it in use.
4. Add a fade or motion if you want one.
5. Choose a code format, type your CSS selector, and click Copy code.

What you can use it for

• Hero and section backgrounds with no image to load
• Subtle texture behind cards and sign-up boxes
• Graph paper and grid backgrounds for docs and design tools
• Placeholders and transparency checkerboards
• Text filled with a pattern for headlines
• Theme-aware patterns with CSS variables, for light and dark modes

17 CSS patterns and how each is built

Sizes are the default tile for each pattern, and code size is the plain CSS the tool gives with default settings.

Pattern	CSS function	Gradients	Tile	Code size (bytes)
Stripes	linear-gradient	1	34 × 34 px	204
Dots	radial-gradient	1	24 × 24 px	147
Polka dots	radial-gradient	2	40 × 40 px	249
Rings	radial-gradient	1	36 × 36 px	179
Overlapping circles	radial-gradient	2	48 × 48 px	301
Grid	linear-gradient	2	32 × 32 px	194
Graph paper	linear-gradient	4	80 × 80 px	329
Checkerboard	conic-gradient	1	32 × 32 px	167
Crosshatch	linear-gradient	2	28 × 28 px	263
Zigzag	linear-gradient	4	40 × 40 px	362
Diamonds	linear-gradient	2	36 × 36 px	229
Triangles	linear-gradient	1	32 × 32 px	142
Pyramids	conic-gradient	1	44 × 44 px	195
Bricks	linear-gradient, conic-gradient	3	56 × 56 px	324
Plus signs	conic-gradient	2	36 × 36 px	255
Waves	radial-gradient	3	48 × 16 px	376
Plaid	linear-gradient	4	64 × 64 px	362

Stripes at angles other than 0, 45, 90 and 135 degrees use repeating-linear-gradient, with no tile.

How a pure CSS pattern works

Two ideas do the work. A hard colour stop, where two colours meet at the same point, draws a sharp edge rather than a blend. And background-size sets one small tile, which the browser repeats across the element. Layers stack, with the first on top, so a grid is simply horizontal lines over vertical lines.

.pattern {
  background-color: #111418;
  background-image: radial-gradient(circle, #35b893 3px, transparent 3.5px);
  background-size: 24px 24px;
}

That gives a 3 px dot in a 24 px tile, with half a pixel of soft edge. Tiles use whole pixels, because that keeps the repeat exact. Our tests render every pattern in Chrome and compare each tile with the next, pixel by pixel.

CSS patterns or SVG patterns

	CSS gradient pattern	SVG pattern
Best for	Stripes, dots, grids, checks and other simple geometry	Curves, detailed or hand-drawn shapes
Image file	None	Inline SVG or a file
Change colours with CSS variables	Yes	Only when the SVG is inline in the page
Use in print or design apps	No: code only	Yes

Want a file? The SVG Pattern Generator makes seamless SVG and PNG tiles. For one classic pattern with more options, see the Checkerboard Pattern Generator, Polka Dot Pattern Generator, Chevron Pattern Generator or Plaid Pattern Generator.

Tips for pattern backgrounds

• Keep text readable. Lower Strength, or put text on a solid panel, as the Hero preview does. Check the colours with the Contrast Checker.
• Pair a pattern with a soft blend from the CSS Gradient Generator or Mesh Gradient Generator: tick Transparent background and stack them.
• Use the fade to let a pattern melt into the section below. The mask fades the whole element, so put the pattern on its own layer if the element holds text.
• Motion catches the eye, so keep it slow. For other effects, see the CSS Animation Generator.

Frequently asked questions

What is a CSS background pattern?

It’s a repeating design made by the browser from CSS gradients. A gradient with hard colour stops draws a sharp shape, background-size turns it into a tile, and the tile repeats across the element. There’s no image file.

Is this CSS pattern generator free?

Yes. It’s free, with no sign-up, and you can use the code in personal and commercial projects with no credit needed.

How do I use the code?

Click Copy code and paste it into your stylesheet. Then add the class to your element. The default selector is .pattern, so that’s class="pattern", or type your own selector first.

CSS gradient patterns or SVG patterns?

CSS gradients suit simple geometry and need no image at all. SVG suits complex, curved or hand-drawn shapes, and gives you a file you can use in print. For those, use our SVG Pattern Generator.

Does it work in all browsers?

MDN lists radial gradients as available across browsers since July 2015 and conic gradients since November 2020. The table on this page shows which patterns use conic gradients. The fade uses mask-image, available across browsers since December 2023, and we include the older -webkit- form too.

Why do my dots look clipped?

A dot is drawn inside its tile, so it gets cut off if it’s wider than the tile. The tool limits the dot size to fit, so this can’t happen in the code it gives you.

Why do diagonal edges look a little rough?

Hard colour stops give an edge with no blending. Pick Slightly soft or Soft under Edges where that option shows. It blends the edge by half a pixel or one pixel.

How do I put a pattern over a colour or a photo?

Tick Transparent background and the code leaves out the background colour. Then list the pattern first in your own background-image, with the photo or gradient after it. The first layer sits on top.

How do I make a pattern more subtle?

Lower Strength. It sets the transparency of the pattern colour, so the background shows through. Keep lowering it until text on top reads easily.

How does the moving pattern work?

It moves background-position by exactly one tile in each loop, so the end matches the start and you can’t see the jump. The code runs only for people who haven’t asked their device to reduce motion.

Why can’t I add motion to stripes at some angles?

Motion needs a tile. Stripes at multiples of 45° are built as a tile, but other angles use a repeating gradient that fills the element with no tile to move. Set the angle to 0, 45, 90 or 135.

How do I change the colours for dark mode?

Choose the CSS variables format. It puts the colours in –pattern-color and –pattern-bg. Set new values for them in your dark mode rule.

Does it work with Tailwind?

Yes. The Tailwind format gives one arbitrary-property class with the whole background in it. Paste it into your element’s class list. Motion and fade aren’t in that class: use the CSS format for those. Made Good Designs is not affiliated with Tailwind CSS.

Is it bad for page speed?

The default code here runs from 142 to 376 bytes per pattern, as counted in the table, and it needs no extra download. A very small tile over a very large area asks more of the browser to paint, so test heavy motion on real devices.

Can I download it as an image?

This tool outputs code, not pictures. For an SVG or PNG file, use our SVG Pattern Generator.