Skip to content
MagicWebBox
Sign in

Background patterns

Repeating backgrounds in CSS or SVG

Settings

Pattern

Preview

Code

Output format
background-color: #fef2f2;
background-image: radial-gradient(circle, #b91c1c 3px, transparent 3.5px);
background-size: 24px 24px;

About this tool

This generator creates repeating backgrounds for a page section, a card or a header, with no image file to host. Nine patterns are available: dots, offset dots, grid, stripes, checkerboard, triangles, zigzag, waves and crosses. You set the tile size from 4 to 200 px, the line thickness or dot radius, the angle for patterns that support it, and the color and opacity of both the pattern and the background.

The code comes out as pure CSS gradients or as an inline SVG data URL. Zigzag, waves and crosses have no faithful gradient equivalent, so they switch to SVG automatically. The result is a handful of background declarations to paste into your stylesheet, and you can also download the pattern as an SVG file that includes its background color.

How to use it

  1. Pick a "Pattern" from the grid.
  2. Set the "Size", the "Thickness" and, when the pattern supports it, the "Angle".
  3. Choose the "Pattern color", the "Background color" and their opacity, or click "Swap colors".
  4. Select the "Output format": "CSS (gradients)" or "SVG (data URL)".
  5. Click "Copy CSS" or "Download SVG".

Frequently asked questions

Should I use CSS gradients or SVG?

CSS gradients give readable code that is easy to tweak by hand, with no image involved. An SVG data URL reproduces some patterns more faithfully and stays crisp. For zigzag, waves and crosses only SVG is available, even if you select CSS.

What does the copied code contain?

Ready-to-paste declarations: background-color, background-image and, depending on the pattern, background-size and background-position. Drop them into the CSS rule of the element you want to decorate. No external file is needed, since the SVG is embedded in the data URL.

Why does a rotated pattern stop repeating as tiles?

When a pattern is rotated, the SVG uses a rotated pattern element that fills the whole area instead of repeating a small tile, so background-size is dropped from the code. In CSS mode, stripes and grid handle the angle directly inside the gradient.

How do I get a pattern on a transparent background?

Set "Background opacity" to 0%: the background color becomes transparent and only the pattern is drawn, on top of whatever sits behind the element. You can also lower the pattern opacity for a subtler texture.