
Is your linear gradient background just not working when you use Sass?
I ran into this problem recently on a client site. Instead of creating the striped pattern I was going for, Chrome rendered a plain color. Ugh!
Fortunately for you, via some trial and error I figured out an easy fix! Read on to find out what I did to get that striped background my client’s mockup called for.
How to fix a broken repeating-linear-gradient when using Sass
So, what gives? Why did I get a plain colored background when I used Sass, while CodePen had no issue rendering the striped background pattern when I used plain CSS?
The answer: multiple stops for each color, one of which was 0px.
The particular Sass compiler I was using (gulp-sass) stripped out the ‘0px’ part of my first color declaration, making my “stripes” overlap and display one plain color instead. When I separated each color stop into its own entity, they displayed just fine, even though gulp-sass still stripped the 0px declaration.
Here’s the original (broken) Sass I was using:
background: $light-blue repeating-linear-gradient( 90deg, darken( $light-blue, 3% ) 0px 40px, $light-blue 40px 80px );
And here’s the Sass that actually worked:
background: $light-blue repeating-linear-gradient( 90deg, darken( $light-blue, 3% ) 0px, darken( $light-blue, 3% ) 40px, $light-blue 40px, $light-blue 80px );
That’s all there is to it! If you’re having a problem with your repeating-linear-gradient backgrounds not rendering correctly, try separating out each stop explicitly like I did in that second code blurb above.
Did this post stop you from pulling your hair out for hours? Let me know in the comments below! ?
Get Technically Speaking with Megan

Fantastic tip! I had this exact issue in Gatsby using their SASS plugin. It was outputting incorrectly on build only, but changing the syntax for the repeating-linear-gradient as you suggested did the trick!
Awesome! Glad I could help. ?
Awesome ! I have the problem, only on build environment too on CRA. Very strange.
Definitely something hinky in the build process somewhere!
Thank you! This was driving me crazy.
I’m glad it helped you! I remember it driving me nuts, too. Such a weird bug!