How we can create a design background using the linear-gradient?

Problem

I have the following design and I want to manage it using single background css attribute on single div tag.

enter image description here

I add the following code to make background as it in image but I am unable to manage it for footer. HTML

<div class="main-container></div>

CSS

.main-container{
 linear-gradient(to right, #86aec1 0%, #86aec1 3.6%, #afafaf 3.6%, #afafaf 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
 height: 100%;
 margin: 0 auto;
 width: 73.9%;
}

Using the above code it shows only left blue section and right gray section but I am unable to get any other option where i can create footer section on a single div.

Problem courtesy of: vin

Solution

You can achieve this using a mix of box-shadow and linear-gradient. Refer inline comments for more details.

.main-container {
  background: -webkit-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); /* this produces the thin line above the bottom */
  background: -moz-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%);
  background: linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%);
  /* Just play around with the percentages and increase them to get a thicker line */
  height: 300px;
  margin: 0 auto;
  width: 73.9%;
  box-shadow: inset 25px -25px #86aec1; /* this produces the thick left and bottom border */
  border: 1px solid black;
}
<div class="main-container">&nbsp;</div>

Solution courtesy of: Harry

Discussion

You can use multiple backgrounds. In the following example, two linear gradients and one solid color background is used:

.main-container {
  margin: 0 auto;
  width: 50%;
  height: 300px;
  background:
    linear-gradient(to right,
      rgba(133, 173, 192, 1)    0, rgba(133, 173, 192, 1) 20px,
      rgba(133, 173, 192, 0) 20px
    ),
    linear-gradient(to top,
      rgba(133, 173, 192, 1)    0, rgba(133, 173, 192, 1) 20px,
      rgba(133, 173, 192, 0) 20px, rgba(133, 173, 192, 0) 25px,
      rgba(133, 173, 192, 1) 25px, rgba(133, 173, 192, 1) 30px,
      rgba(133, 173, 192, 0) 30px
    ),
    #AFAFAF;
}
<div class="main-container"></div>

Discussion courtesy of: Salman A

This recipe can be found in it's original form on Stack Over Flow.