Stripe and Wave Patterns

All color tools

Seamless stripes, waves, zigzags, chevrons and grids. Choose your colors, line width and angle, then copy the CSS or download SVG, PNG or WebP files for free.

Free

1Pick a pattern

All Lines and waves Dots and circles Geometric 3D and illusions Textiles and weaves Bricks and tiles Japanese Islamic and Moorish Art Deco Tribal and folk Nature Icons and objects Pixel art Generative

Your headline here

See how the pattern sits behind real content.

Get started
Pattern

Designs to start from

Select one to open it in the editor, then change its colors and settings.

Interlaced arches 1 Interlaced arches 1 Beads 1 Beads 1 Dashes 1 Dashes 1 Hatched blocks 1 Hatched blocks 1 Crosshatch 1 Crosshatch 1 Scallops 1 Scallops 1 Corner arcs 1 Corner arcs 1 Bands 1 Bands 1 Square waves 1 Square waves 1 Grid 1 Grid 1 Diagonal stripes 1 Diagonal stripes 1 Zigzag 1 Zigzag 1

Browse by collection

Dots and circles 189 patterns Geometric 138 patterns 3D and illusions 99 patterns Textiles and weaves 105 patterns Bricks and tiles 148 patterns Japanese 33 patterns Islamic and Moorish 30 patterns Art Deco 47 patterns Tribal and folk 62 patterns Nature 196 patterns Icons and objects 236 patterns Pixel art 152 patterns Generative 251 patterns

About Stripe and Wave Patterns

Lines are the quietest way to add texture to a page. This collection covers plain stripes and bands, diagonal stripes, waves, zigzags, chevrons, scallops, dashes, grids, crosshatching, ripples and braids, so you can go from a discreet pinstripe to a bold retro wave.

Stripes and grids stay very small as code, which makes them a good choice for website backgrounds. Change the stroke width and spacing to set how dense the lines feel, and use the angle slider to turn straight stripes into diagonals.

Frequently asked questions

Pick a stripe design, set the angle to 45 degrees and copy the CSS. Angles other than 0, 90, 180 and 270 degrees use an SVG that fills the element, so the stripes stay even at any width.

Yes. The stroke slider sets the width of the lines, and the spacing sliders set the gap between them.

Thin lines in two close colors stay readable behind text. Use the "On a page" preview to check the result under a real card before you copy the code.
Share this
Related Tools
Gradient from Image
Gradient Generator
Pattern Generator
Color Code Converter
Full Black Screen
Color Blindness Simulator
Web-Safe Color Palette
Pantone Color Matcher
Full Green Screen
RAL Color Matcher
Color Shades Generator
Full Blue Screen
Export Color Palette
AI Mood Palette
Full White Screen
Color Palette from Image
Full Red Screen
AI Brand Palette Generator
AI Brand Kit from Image
Color Palette from Website
Popular searches
stripe pattern wave pattern svg zigzag pattern chevron pattern css stripes background seamless wave background grid pattern svg diagonal stripes css
Need help?
Found an issue with this tool? Let our team know.
Report an issue

Add this free tool to your own website: copy and paste the code below.