How do I create a CSS stripe background?

Pick a stripe preset, choose colors, adjust spacing and opacity, then copy the generated CSS. The tool uses pure CSS gradients, so no images are required.

Can I create multi-color stripe backgrounds?

Yes. Several stripe presets support two or three foreground colors. Use the extra color pickers to generate candy-stripe, retro and barber-pole effects.

Are these stripe patterns responsive?

Yes. The generated CSS stripe patterns are vector-like gradient backgrounds, so they scale cleanly on all screen sizes and high-density displays.

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.

Colors

Fade mask

Opacity

Size

Rotation

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

Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview

We also build

BrandBird

Turn screenshots into beautiful mockups.

SuperMotion

Create short videos with motion effects.

AI Selfie Studio

Professional AI Portraits from a single selfie.