6 PresetsCustom ColorsPure CSSCopy Code
background: repeating-linear-gradient(45deg, #ffffff, #ffffff 20px, #3b82f6 20px, #3b82f6 40px);

How It Works

1

Choose Pattern

Select from stripes, dots, grid, waves, zigzag, or checkerboard.

2

Customize

Adjust colors, size, and angle to match your design.

3

Copy CSS

Click Copy to get the CSS code for your stylesheet.

Frequently Asked Questions

What patterns are available?
Stripes, dots, grid, waves, zigzag, and checkerboard patterns with customizable colors and sizes.
Can I change the colors?
Yes. Both foreground and background colors are customizable.
Is the CSS pure CSS?
Yes. All patterns use CSS gradients and background properties. No images needed.
Can I adjust the angle?
Yes. Rotate patterns by adjusting the angle control.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools