Generator Tools

CSS Background Pattern Generator

Generate pure CSS background patterns. Vertical, horizontal, and diagonal stripes, polka dots, grid lines, and checkerboard. Live preview, copy CSS or Tailwind.

Quick presets

Live preview

The preview applies the same background-image and background-size that will be copied. Resize the panel to see how the pattern tiles.

Pattern

Repeating angled bars. The classic caution-tape and barber-pole pattern. Angle is editable.

Colors

ForegroundBackground

Sizing

Tile size

8 px

Stripe thickness

4 px

Angle

45 deg

CSS

background-color: #0f172a;
background-image: repeating-linear-gradient(45deg, #1f2937 0, #1f2937 4px, #0f172a 4px, #0f172a 8px);
background-size: auto;

background-image value

Drop this into any CSS rule, styled-component, or CSS-in-JS string.

repeating-linear-gradient(45deg, #1f2937 0, #1f2937 4px, #0f172a 4px, #0f172a 8px)

Tailwind arbitrary classes

Three arbitrary-value classes. Underscores are the documented Tailwind escape for spaces inside arbitrary values.

bg-[#0f172a] bg-[image:repeating-linear-gradient(45deg,_#1f2937_0,_#1f2937_4px,_#0f172a_4px,_#0f172a_8px)] bg-[size:auto]

How these patterns work

Stripes use a single linear-gradient with two hard stops (the same color repeated at adjacent positions skips the smooth interpolation a gradient normally does). Repeating happens through background-size; the diagonal version uses repeating-linear-gradient so the angle stays clean across the tile.
Dots use a radial-gradient that paints a small circle in the center of a tile, then the tile repeats via background-size.
Grid stacks two linear-gradients: one horizontal, one vertical. Where the lines cross, both colors paint the same pixel and you get a sharp graph-paper look.
Checkerboard uses a conic-gradient with four 90-degree sectors. The result tiles into the classic two-color checker without any image asset.

Tips

Want a subtle texture for a hero or section background? Pick a foreground close to your background color and a small thickness (1 to 2 px lines, 1 to 3 px dots).
Want a strong accent? Increase thickness or dot diameter to roughly one quarter of the tile size.
For a fixed pattern that does not scroll with the page content, add background-attachment: fixed to the same rule.
The Tailwind classes use arbitrary values with underscores in place of spaces. They work with Tailwind v3 and v4 and JIT mode, and they survive purging because they appear as a single token in your source.
Patterns render via gradients, so they remain sharp at any zoom level and never become blurry the way a tiled image can.

How to use

Pick a pattern: vertical stripes, horizontal stripes, diagonal stripes, polka dots, grid lines, or checkerboard.
Choose foreground and background colors with the color pickers or by typing a hex value into the field.
Drag the tile size and stripe thickness sliders, or type exact pixel values. For diagonal stripes, set the angle too.
Watch the live preview update. Try the quick presets to load common looks, or click Swap colors to invert the pattern.
Click Copy CSS for the full three-line block, Copy value for the background-image string alone, or Copy classes for the Tailwind arbitrary variant.

About this tool

CSS Background Pattern Generator builds repeating background patterns using only CSS gradients, with no SVG and no image asset. Six pattern families cover the most-requested looks: vertical stripes, horizontal stripes, diagonal stripes at any angle, polka dots, graph-paper grid lines, and checkerboard tiles. Each pattern is built from a single linear-gradient, radial-gradient, conic-gradient, or repeating-linear-gradient (the same primitives that ship in every modern browser), combined with background-size to control how the gradient tiles across the painted box. Adjust the foreground and background colors with native color pickers or by typing a hex code, drag tile size and stripe thickness sliders, and rotate diagonal stripes through a full half turn. The live preview shows exactly what the copied code will render, because the preview element is styled with the same three CSS declarations the tool exports (background-color, background-image, and background-size). Output is ready to paste as three lines of CSS, as a one-line background-image value for inline styles and styled-components, or as Tailwind arbitrary classes that work with v3 JIT and v4. Quick presets cover the patterns designers actually reach for: carbon fiber, caution tape, candy stripes, ledger lines, classic polka dots, a subtle dot grid for design surfaces, graph-paper and blueprint grids, transparency checker, and a racing-flag checker. Swap colors with one click, reset to defaults, or fine-tune by hand. Useful for dashboards, hero sections, empty states, skeleton loaders, code-editor backgrounds, design system documentation, transparency indicators behind product photography, and any place a non-photographic texture beats a tiled image (sharper at every zoom level, no extra HTTP request, no PNG to ship). Colors and parameters never leave your browser.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Background Pattern Generator

How to use

About this tool

You may also like

CSS Gradient Generator

CSS Mesh Gradient Generator

CSS Glassmorphism Generator

SVG Pattern Generator

Color Palette Generator