I wish to make a webpage where its background has a tile of colors(orange, gray, purple) getting darker as it moves towards the right of the page horizontally on an HTML page with CSS. I wish to have the proportions stay the same when the page is resized. Provided a sketch of what the background would look like:

Orange: #ff9900, #e68a00, #cc7a00

Gray: #8c8c8c, #808080, #737373

Purple: #b300b3, #990099, #800080