Create gradient stripe effect using css

I wanted to share this super simple way to create a stripe background using css alone. This comes in very handy when you don’t want to use something plain or an image background. You can also see how to create a simple stripe effect here.

Before we dive in to the stripe code, im just going to share the ‘setup code’ so you can refer back to that when needed.

<div class="stripe-grad">This is the content for my stripe section!</div>

Now for the CSS:

.stripe-section {
    padding: 50px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    background:repeating-linear-gradient(
    -55deg,
    #DCC6E0 200px,
    #D0BBD4 350px,
    #E5BCCD 400px,
    #BCD7E5 800px
    );
}

And this is the result:

This is the content for my stripe section!

 

SHARE THIS POST!
facebooktwittergoogle_pluslinkedin
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...