TailwindreadyTailwindready
Free tool

Pattern Generator

Pick a pattern, tile size and colors. The result is plain CSS gradients, so there is no image to load and it scales to any size.

Pattern
Tailwind classes
bg-white [background-image:radial-gradient(#cbd5e1_2px,transparent_2px)] [background-size:24px_24px]
Raw CSS
background-color: #ffffff;
background-image: radial-gradient(#cbd5e1 2px, transparent 2px);
background-size: 24px 24px;

Frequently asked questions

How do I add a dotted background in Tailwind CSS?

Use arbitrary classes: a background color, [background-image:radial-gradient(#cbd5e1_2px,transparent_2px)] and [background-size:24px_24px]. This tool builds the exact string for any pattern.

Why use CSS gradients for patterns?

They cost no network request, stay sharp at every zoom level, and are easy to recolor. An image or SVG is better for complex artwork.

How do I fade a pattern toward the edges?

Add a mask to the element, for example [mask-image:linear-gradient(to_bottom,black,transparent)]. The pattern then fades out instead of ending abruptly, which works well behind hero text.

Will a busy pattern hurt readability?

It can. Keep the pattern color close to the background, such as a light gray on white, and check text contrast on top with the contrast checker.

Guides that go with this tool

More free Tailwind CSS tools

Scrollbar generatorCustom scrollbar styles for Chrome, Safari and Firefox.SVG to data URIEncode SVG for CSS, img tags and Tailwind backgrounds.Tailwind class cleanerDedupe, sort and find conflicts in a class list.Tailwind breakpointsA live breakpoint viewer plus the default values.CSS to Tailwind converterPaste CSS and get Tailwind v4 utility classes back.Box shadow generatorLayer shadows visually and copy the Tailwind class.

Browse all 34 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Gradient generatorSVG to data URIBrowse components