CSS Stripe Pattern Generator
Dial in the angle, colors, and stripe widths, then copy the CSS
Build striped backgrounds — diagonals, pinstripes, hazard tape, and more — in real time using repeating-linear-gradient. It's built for designers and developers who need CSS for a banner, section background, or decorative accent without opening an image editor. Everything renders in your browser and nothing is sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Click one of the presets (diagonal, pinstripe, hazard, candy cane, pastel, and more) to get started
- Fine-tune the look with the angle slider and the width sliders for each of the two colors
- Set your two colors with the color pickers or by typing HEX values
- Check the preview, then copy the generated CSS and paste it into your project
FAQ
- Which CSS property does the generated code go in?
- Paste it as the value of background-image. You get the pattern with pure CSS — no image file required.
- Can I export it as an image file?
- This tool outputs CSS code only. It's the right fit when you want the background applied through code rather than a bitmap.
- Does it work in every browser?
- repeating-linear-gradient is a standard CSS feature with broad support across all modern browsers.