gjeb3q
Last Updated: February 25, 2016
·
958
· 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

1 Response
Add your response

8242

Really nice, thanks!

over 1 year ago ·