Skip to content
WebTricks

Diagonal stripes background

A repeating two-color diagonal stripe pattern from a single repeating-linear-gradient.

  • background
  • pattern
  • stripes
  • gradient
Color 1#6b46ff
Color 2#00b8d4
Stripe width20px
Angle45deg
HTML 
<div class="stripes"></div>
CSS 
:root {
    --c1: #6b46ff;
    --c2: #00b8d4;
    --w: 20px;
    --angle: 45deg;
}

.stripes {
    width: 100%;
    height: 170px;
    border-radius: 12px;
    background: repeating-linear-gradient(
        var(--angle),
        var(--c1) 0 var(--w),
        var(--c2) var(--w) calc(var(--w) * 2)
    );
}

How it works

repeating-linear-gradient tiles a gradient forever, and using hard color stops (where one color ends exactly where the next begins) turns the smooth blend into crisp stripes:

  • --c1 0 var(--w) paints the first color for --w pixels,
  • --c2 var(--w) calc(var(--w) * 2) paints the second for the next --w,
  • then it repeats. --angle rotates the whole pattern.

No image, infinitely scalable, and a one-property way to make backgrounds, warning tape, or progress-bar fills. Animate background-position for a moving “barber pole”.