Stripe pattern SVG. Horizontal ยท vertical ยท diagonal. Backgrounds, social, web.
๐Ÿ“ Preview

How to use

  1. Pick direction (horizontal / vertical / diagonal).
  2. Set width and height.
  3. Adjust stripe width and gap.
  4. Pick stripe and background colors.
  5. Download SVG or PNG.

Key features

  • 4 directions (horizontal, vertical, both diagonals)
  • Stripe width and gap 2โ€“100 px
  • 5 presets (pink, red, mini, caution, cyan)
  • 2-color alternating option (Safari style)
  • SVG (infinite scale) or PNG

Use cases

  • Website section backgrounds โ€” diagonal stripes for separation
  • Social posts โ€” trendy pattern
  • Wrapping paper โ€” print patterns
  • Caution / warning signs โ€” yellow + black diagonal
  • Sports jerseys โ€” horizontal/vertical stripes

Psychology of stripe patterns

Diagonal stripes (45ยฐ), unlike static horizontal/vertical, convey motion and energy. The asymmetry guides the eye in one direction โ€” perfect for sale/new/discount callouts. Yellow + black is nature's strongest warning signal (wasps, bees), the global safety-sign standard.

FAQ

CSS-only stripes?

`background: repeating-linear-gradient(45deg, #ec4899 0 20px, transparent 20px 40px)`. Downloaded SVG is more precise.

Print size?

SVG scales infinitely. 300 dpi A4 landscape = 3508ร—2480 px. Use SVG for crisp print.

Moirรฉ artifacts?

If stripe width and gap are too close, you'll see shimmering. Use โ‰ฅ 6 px gap and large anti-aliased PNG.

Free?

Yes.