Last Updated: January 22, 2021
·
1.147K
· codingjohnson

CSS Stripey Backgrounds Made Easy

Recently I needed to skin a boostrap theme, not wanting to add additional elements I needed to implement a vertically stripey background. Here's the CSS:

background:
    -webkit-linear-gradient(
        left center,
            #F69087, #F69087 25%,
            #85CCB1 25%, #85CCB1 50%,
            #85A9B3 50%, #85A9B3 75%,
            #B0CB7A 75%, #B0CB7A 100%);

You're going to need additional vendor prefixes too, here's the result in modern browsers:

Picture