Stripe Pattern Maker
Tune a lightweight stripe background, preview it locally, then copy or download the generated CSS.
LIVE PREVIEW
Values are limited to 1–96px for width and spacing and 0–180° for angle.
A QUICK WALKTHROUGH
How to use this tool
- Choose foreground and background colors, then select the stripe direction.
- Set stripe width, spacing, and angle within the bounded controls.
- Copy the CSS or download it as a small stylesheet snippet.
CSS-only stripe backgrounds
The pattern is generated in the browser with repeating-linear-gradient. No image, canvas, upload, external request, or dependency is used.
Bounded values
Stripe width and spacing stay within practical 1–96px limits, while angle stays between 0° and 180°. The preview and copied CSS always use valid color values and positive dimensions.
GOOD TO KNOW
Common questions
Can I use the generated CSS on any element?
Yes. Copy the background declaration into an element or a reusable CSS class, then adjust the element size and contrast for your design.
Does the pattern upload my colors?
No. Preview, copying, and downloading happen locally in your browser.
Why does changing direction alter the angle?
Horizontal and vertical directions use fixed 0° or 90° geometry. Diagonal directions use your chosen angle so the spacing remains predictable.