Stripe Gradient

index.html

<div class="stripes">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
</div>

stripe-gradient.markdown

Stripe Gradient

A Pen by Nick on CodePen.

License.

style.scss

*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

$background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
$first: #53f;
$second: #4553ff;
$third: #4f40ff;
$fourth: #25ddf5;
$fifth: #1fa2ff;
$sixth: #1fa;

.stripes {
    width: 100%;
    height: 35vw;
    background: $background;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    transform: skewY(-12deg);
    transform-origin: 0;
    position: relative;
    span:nth-child(1){
        grid-column: span 1;
        background: $first;
    }
    span:nth-child(2){
        grid-column: span 2;
        background: $second;
    }
    span:nth-child(3){
        grid-column: span 2;
        background: $third;
    }
    span:nth-child(4){
        grid-column: 6;
        grid-row: 3;
        background: $fourth;  
    }
    span:nth-child(5){
        grid-column: span 2;
        grid-row: 4;
        background: $fifth;  
    }
}