Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Pattern Generator

Build tiling background patterns with pure CSS gradients. Pick stripes, dots, a grid, checkerboard, or diagonal lines, set two colors and the scale, then copy the background code.

Preview

24px tile

The pattern repeats seamlessly across any element. Everything runs in your browser. Nothing is uploaded.

Pattern

Colors

Foreground#4f46e5
Background#e0e7ff

Scale

CSS
background-color: #e0e7ff;
background-image: repeating-linear-gradient(90deg, #4f46e5 0, #4f46e5 6px, #e0e7ff 6px, #e0e7ff 24px);

How to make a CSS background pattern

  1. Pick a pattern

    Choose stripes, dots, a grid, a checkerboard, or diagonal lines. The preview switches to the new pattern right away so you can compare the options.

  2. Set the two colors

    Choose a foreground color for the shapes or lines and a background color for the space between them, with a live swatch for each.

  3. Tune the scale

    Drag the size and thickness sliders to set how large each tile repeats and how heavy the lines or dots are, and set the angle for stripes.

  4. Copy the CSS

    The background code under the preview always matches what you see, so click Copy CSS to paste it into your stylesheet.

Why use this tool

Five repeating patterns

Switch between stripes, dots, a grid, a checkerboard, and diagonal lines. Each one is drawn from gradients alone, so there are no images to host and the tile stays crisp at any zoom.

Two-tone color control

Set a foreground color for the shapes and a background color for the gaps. Swap them, or reach for high contrast, to get anything from subtle texture to bold graphic tiles.

Size, thickness, and angle

Sliders set how far the tile repeats, how heavy each line or dot is, and, for stripes, the angle. The pattern tiles seamlessly at whatever scale you choose.

Live preview and matching code

A large preview shares the same settings as the CSS below, so the copied background declaration is exactly the texture you see on screen.

Runs entirely in your browser

Everything happens on your device. There is no account, server, or quota, and nothing is uploaded.

About this tool

This CSS pattern generator writes a repeating background from gradients alone, with no image files to create or host. Repeating gradients can draw stripes, dots, a grid, a checkerboard, and diagonal lines, and because they are pure CSS the tile stays sharp at any size and downloads with the stylesheet instead of as a separate asset. Pick a pattern, set a foreground color for the shapes and a background color for the gaps, then use the sliders to control how far the tile repeats and how heavy each line or dot is.

Patterns like these are a fast way to add texture to a hero section, a card, an empty state, or a full-page background without opening a design tool. The size and thickness sliders keep the tile tiling seamlessly, so a small repeat stays even edge to edge across any element. The preview shares the same settings as the code below, so the copied CSS is exactly the pattern you see. The output is a complete set of background declarations that pastes into a stylesheet unchanged. For smooth color blends instead of a repeating motif, the gradient generator covers linear and conic types, and the conic gradient generator handles cone-shaped sweeps. For vector tiles with more detailed motifs, try the SVG pattern generator.

Nothing is uploaded and there is no account; the pattern lives only in your browser tab. The color palette generator is a quick source of two colors that already sit well together.

Frequently asked questions

How do I make a CSS background pattern?
Pick a pattern such as stripes, dots, or a grid, set the two colors, then use the size and thickness sliders to control the scale. The preview and the CSS update instantly, so when the texture looks right you copy the code and paste it into your stylesheet.
Do these patterns use any images?
No. Every pattern is drawn from repeating gradients, so there are no image files to create or host. The tile is pure CSS, which keeps it sharp at any zoom and ships with your stylesheet instead of as a separate download.
Will the pattern tile seamlessly?
Yes. Each pattern repeats on a fixed tile size that you set with the size slider, so it fills any element evenly from edge to edge. Changing the size keeps the repeat seamless; it just makes the motif larger or smaller.
How do I use the generated CSS?
Copy the CSS and paste it into the rule for the element you want to texture. The output is a full set of background declarations, so it applies to a section, a card, a button, or the whole page body without any extra markup.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server, stored, or logged.

Related tools