<!DOCTYPE html> <style> .x { width: 200px; height: 100px; display: inline-block; } .a { background: linear-gradient(to bottom, blue, white, red); } .e { background: linear-gradient(to bottom left, blue, white, red); } .g { background: linear-gradient(to left, blue, white, red); } .i { background: linear-gradient(to top left, blue, white, red); } .k { background: linear-gradient(to top, blue, white, red); } .m { background: linear-gradient(to top right, blue, white, red); } .o { background: linear-gradient(to right, blue, white, red); } .q { background: linear-gradient(to bottom right, blue, white, red); } </style> <div class="x a"></div> <div class="x e"></div> <div class="x g"></div> <div class="x i"></div> <div class="x k"></div> <div class="x m"></div> <div class="x o"></div> <div class="x q"></div>