Home > shorts > Paint each corner in different color with CSS

Paint each corner in different color with CSS


You can blend two gradients to paint each corner in different color.

background: linear-gradient(90deg, #95c623, #e55812);
min-height: 100vh;

&:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    mask-image: linear-gradient(to bottom, transparent, white);
    background: linear-gradient(90deg, #246eb9, #b81365);
}

Check the demo here => CodePen

© 2021, Andrew Losseff