CSS Pattern Tiles Generator

Choose a tiled background style

This pattern tiles generator focuses on two common CSS pattern backgrounds: dots and stripes.

• Use Dots for a dots background, polka dot background, or subtle tiled background
• Use Stripes for a stripe background, striped background, or repeating banded background
• Start with the palette, because it drives the base color behind the pattern tiles

Adjust the tile rhythm

The main controls change how dense or open the tiled background feels.

• For dots, tune Dot size and Gap to move between fine speckles and bold polka dot backgrounds
• For stripes, tune Stripe width and Gap width to move between tight pinstripes and wider striped backgrounds
• Opacity controls how much the pattern tiles sit on top of the base color

Use the advanced controls for alignment

The advanced settings are there for layout matching and art direction.

• Dots support Offset X/Y for positioning the tiled background
• Stripes support Angle and Phase so the stripe background can follow the layout direction
• Randomize the Seed when you want fresh tiled pattern variations with the same control ranges

Export the pattern tiles background

Copy the CSS, download an image, or open the result in the editor when the dots background or striped background is ready.