Create gorgeous stripe effect using css

I wanted to share this super simple way to create a gradient 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 gradient 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-section">This is the content for my stripe section!</div>

Now for the CSS:

.stripe-section {
    padding: 50px;
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    background:repeating-linear-gradient(
    -55deg, #DCC6E0, #DCC6E0 8px, #FAFAFA 5px, #FAFAFA 15px
    );
}

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...