Прямоугольники

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Прямоугольники</title>
<style>
    html, body, div {
        margin: 0;
        padding: 0;
    }
    .rectangle {
        position: absolute;
        width: 270px;
        height: 180px;
    }
    .blue {
        left: 90px;
        top: 235px;
    }
    #blue1 {
        background-image: linear-gradient(bottom, rgba(20,77,132,0) 25%, rgba(20,77,132,1) 70%);
        background-image: -o-linear-gradient(bottom, rgba(20,77,132,0) 25%, rgba(20,77,132,1) 70%);
        background-image: -moz-linear-gradient(bottom, rgba(20,77,132,0) 25%, rgba(20,77,132,1) 70%);
        background-image: -webkit-linear-gradient(bottom, rgba(20,77,132,0) 25%, rgba(20,77,132,1) 70%);
        background-image: -ms-linear-gradient(bottom, rgba(20,77,132,0) 25%, rgba(20,77,132,1) 70%);
        z-index:4;
    }
    #blue2 {
        background: #144d84;
        z-index:-1;
    }
    #indigo {
        background: #4b0082;
        left: 270px;
        top: 100px;
        z-index:3;
    }
    #saddlebrown {
        background: #8b4513;
        left: 450px;
        top: 235px;
        z-index:2;
    }
    #green {
        background: #008000;
        left: 270px;
        top: 370px;
        z-index:1;
    }
</style>
</head>
<body>
    <div class="rectangle blue" id="blue1"></div>
    <div class="rectangle blue" id="blue2"></div>
    <div class="rectangle" id="indigo"></div>
    <div class="rectangle" id="saddlebrown"></div>
    <div class="rectangle" id="green"></div>
</body>
</html>