Share Feedback

CSS Stripe Pattern Generator

Stripe-only CSS background generator with diagonal, horizontal, vertical and multi-color stripe styles. Tune colors, spacing, rotation and opacity, then copy CSS instantly for your project.

CSS Background Patterns - FREE editable patterns that actually look cool | Product Hunt
  • Diagonal

  • Diagonal v2

  • Diagonal v3

  • Lines

  • Lines v2

  • Lines v3

  • Lines v4

  • Lines v3 Dashed

  • Lines v3 Dotted

  • Lines v4 Dashed

  • Lines v4 Dotted

  • Wide Diagonal

  • Classic Candy Stripe

  • Dark Triple Band

  • Pinstripe Accent

  • Dual Color Dashes

  • Retro Sport Stripe

  • Rainbow Micro Stripes

  • Dual Accent Ruling

  • Barber Pole

  • Monochrome Escalator

  • Light Notebook Lines

  • Scanlines

ABOUT THE TOOL

CSS Stripe Background Pattern Generator

This free stripe pattern generator creates pure CSS backgrounds from repeating gradients, so you can design diagonal stripes, horizontal rules, vertical bands and multi-color stripe textures without exporting images.

Create Diagonal, Horizontal and Vertical CSS Stripes

Stripe backgrounds are built with repeating-linear-gradient, which makes them flexible enough for subtle section textures, bold hero backgrounds, card accents and UI dividers. Adjust spacing to move from fine pinstripes to wide bands.

Multi-Color Stripe Patterns for Web Design

The stripe presets support two and three color combinations for retro stripes, candy-stripe effects, barber-pole backgrounds and layered line patterns.

Explore More CSS Background Generators

Explore more pure CSS background tools: CSS Background Patterns, CSS Dot Background Generator, CSS Grid Background Generator, CSS Geometric Background Generator, and CSS Wave Background Generator.

Hi fellow creator!

I'm Jim, the founder, designer & engineer behind the MagicPattern toolbox.

For many years, I was struggling to create engaging visuals for products, branding and interfaces. Their creation required pro design skills or many hours of practice.

That's why I build MagicPattern. My mission is to help people create pro graphics with no effort and no prior design knowledge.

- Jim Raptis
Jim Raptis, MagicPattern Founder & CEO

Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview

©2026 MagicPattern. Founded by Jim Raptis

We also build