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

Question

I have the following design and I want to manage it using single background css attribute on single div tag.
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.

Answer 1

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"> </div>

Answer 2

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>