Edit in JSFiddle

.vertical-linear-gradient {
    background-color: #42b4e6; /* fallback for older browsers */
    background-image: linear-gradient(to top, #42b4e6, #ffffaa);
}

.horizontal-linear-gradient {
    background-color: #42b4e6; /* fallback for older browsers */
    background-image: linear-gradient(to left, #42b4e6, #ffffaa);
}

.angle-linear-gradient {
    background-color: #42b4e6; /* fallback for older browsers */
    background-image: linear-gradient(45deg, #42b4e6, #ffffaa);
}

.rainbow-linear-gradient {
    background-color: #42b4e6; /* fallback for older browsers */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.multiple-linear-gradient {
    background-color: #42b4e6; /* fallback for older browsers */
    background-image: linear-gradient(120deg, rgba(0,255,255,0.5) 30%, rgba(255,127,255,0.5) 50%, rgba(127,127,255,0.5) 70%, rgba(255,255,255,0) 87%), linear-gradient(45deg,  rgba(255,0,255,0.5) 40%, rgba(255,127,127,0.5) 40%, rgba(127,255,127,0.5) 60%, rgba(255,255,0,0.5) 60%);
}

.example {
    margin: 20px;
    padding: 20px;
    max-width: 200px;
}

<div class="vertical-linear-gradient example">
    Vertical linear gradient example
</div>

<div class="horizontal-linear-gradient example">
    Horizontal linear gradient example
</div>

<div class="angle-linear-gradient example">
    Angle linear gradient example
</div>

<div class="rainbow-linear-gradient example">
    A rainbow made from a gradient
</div>

<div class="multiple-linear-gradient example">
    Multiple linear gradient example
</div>