<div class='square'></div>

.square {
    height: 400px;
    width: 400px;
    margin: 2rem auto;
    background: linear-gradient(to right, black  0%, black  100%),
                linear-gradient(to right, white  0%, white  100%),
                linear-gradient(to right, gold   0%, gold   100%),
                linear-gradient(to right, pink   0%, pink   100%),
                linear-gradient(to right, brown  0%, brown  100%),
                linear-gradient(to right, cyan   0%, cyan   100%),
                linear-gradient(to right, yellow 0%, yellow 100%),
                linear-gradient(to right, green  0%, green  100%),
                linear-gradient(to right, orange 0%, orange 100%),
                linear-gradient(to right, purple 0%, purple 100%),
                linear-gradient(to right, blue   0%, blue   100%),
                linear-gradient(to right, red    0%, red    100%);
    background-repeat: no-repeat;
    background-size: 10% 10%, 20% 20%, 30% 30%, 40% 40%, 50% 50%, 60% 60%, 70% 70%, 80% 80%, 90% 90%, 100% 100%;
}