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.