Skip to content
Sign in

Background Patterns for React and Tailwind

A pattern gives a section texture without competing with the words on top of it. Dots, grids, lines and hexagons can sit still or drift slowly, and the good ones fade at the edges instead of ending in a hard line. Check each one in light and dark, and at the size you will really use it. Install it behind your content and tune the spacing and colour to your brand.

Interactive Grid Pattern
Interactive Grid Pattern
Flickering Grid
Flickering Grid
Grid Pattern
Grid Pattern
Dot Pattern
Dot Pattern
Hexagon Pattern
Hexagon Pattern
Striped Pattern
Striped Pattern

About background patterns

Background patterns are repeating textures made from dots, grids, lines, stripes or hexagons. They add structure to an empty section without competing with its content, and the animated ones can flicker, pulse or respond to the pointer while staying in the background.

Keep patterns low in contrast and let them fade toward the edges, so they frame the content instead of filling the page. Match the spacing to your layout's grid when you can, and test in both themes: a pattern that's subtle on white can become a busy texture on black.

Frequently asked questions

A repeating radial-gradient draws dots and two linear-gradients draw grid lines, sized with background-size. The pattern components here wrap that in React with props for spacing, colour and fade, and some use SVG for crisper lines.

Apply a mask-image with a radial or linear gradient over the pattern, so it's strongest behind your content and disappears toward the edges. Many of these patterns take a fade or mask prop that does this for you.

A slow shift or a pulse that follows the pointer can make a section feel alive, but a still pattern costs nothing to render. Use motion where people will look, and keep it still for anyone who has asked for reduced motion.

Yes, as long as the text stays readable. Keep the pattern's contrast low, fade it behind the words, or place the text on a solid surface above it.

Stripes come from a repeating linear gradient; hexagons are easiest as a small SVG tile repeated across the background. SVG patterns stay sharp at any zoom and take your colours through currentColor.

Yes. Some patterns light up the cells near the pointer or bend toward it, by tracking the pointer position and updating the cells around it. Keep the effect local so the rest of the pattern stays calm.

CSS gradients are lightest for dots, grids and stripes. SVG suits shapes like hexagons and lets you animate individual cells. Both scale cleanly, so choose by the shape you need.

Explore more