Set the stripe angle, width and colors to build a repeating-linear-gradient background, preview it live and copy ready-to-use CSS.
Choose an angle for horizontal, vertical or diagonal stripes, set the width of each band, and add two or more colors. This generates a repeating-linear-gradient background with hard color stops for crisp stripes, or turn on soft edges for a blended candy-stripe effect. Copy the CSS and use it as a background on any element.
Rotate stripes from 0 to 360 degrees for horizontal, vertical or diagonal patterns.
Add as many stripe colors as you like and they repeat automatically across the pattern.
Repeating gradients need no image files, keeping your page lightweight and crisp at any resolution.
Stripes are built with repeating-linear-gradient, which repeats hard color-stop transitions at a fixed angle and width to create bands of color.
Yes. Set the angle to any value between 0 and 360 degrees, with 45 or 135 degrees producing classic diagonal stripes.
Yes. Add extra stripe colors and they will repeat in sequence across the pattern.
Yes. Apply the generated background declaration to any element, including page backgrounds, cards, buttons and badges.
Yes. Repeating gradients are pure CSS with no images, so they add no extra HTTP requests or file weight.