Skip to content
Musterli

CSS Patterns

Over 30 pure CSS patterns: dots, grids, stripes, waves and geometric shapes. Export as CSS, Tailwind, SVG or image.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the CSS Patterns

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

CSS patterns are backgrounds the browser draws itself from gradients. They need no image file, load instantly, stay sharp at any size and can be recolored with a few characters of CSS. The library contains over 30 original patterns in five categories.

How it works

Pick a pattern, set size, colors and opacity, and rotate stripes or grids to the angle you need. Stack up to five patterns as layers, show or hide them and change their order. Press Space for new variations. When you are happy, copy the CSS or the Tailwind classes, or export as SVG, PNG, JPG or WebP.

Try the CSS Patterns now

FAQ

Do the patterns need an image?
No. Every pattern is made only of CSS gradients in background-image. That saves loading time and stays sharp on every screen.
Which browsers support the patterns?
All current browsers: Chrome, Edge, Firefox and Safari. The patterns use linear, radial and conic gradients, which have been widely supported for years.
How exact is the SVG export?
The SVG redraws the same geometry with SVG gradients and tiles. At most, antialiasing of single pixels may differ. For an image without any deviation, use the PNG export.
Can I use the patterns with Tailwind?
Yes. The export gives you Tailwind classes with arbitrary values that you paste straight into your HTML. They work with Tailwind 3 and 4.
May I use the patterns commercially?
Yes. What you create with Musterli is yours and may be used in personal and commercial projects.

Related generators

All generators in CSS patterns