<div class="gradient"></div>
body {
    margin: 0;
}

.gradient {
    background: linear-gradient(to right, rgba(0, 0, 200,.8), rgba(255, 0, 0, 0) 50%),  
                linear-gradient(to left, rgba(0, 255, 0,.8), rgba(0, 255, 0, 0) 50%),  
                linear-gradient(to top, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 50%),  
                linear-gradient(to bottom, rgba(255, 0, 0, .8), rgba(0,0,255,0) 50%);
    height: 100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.