Question

I’m trying to get a linear gradient for the top and bottom of an element. The tutorials found on Google are all over the place, so I’m hoping someone here can help.

This is the HTML and CSS code:

CSS:

.content {background: -webkit-gradient(linear, center bottom, center top, from(#f5f5f5), to(#fff));  }
.separator {
    height:1px;
    border-bottom:1px solid #ebebeb;
    }

HTML:

<div class="content">

</div>

<div class="separator"></div>

<div class="content">

</div>

<div class="separator"></div>

<!-- etc... ->

I want it to produce this:

Of course, the CSS and HTML I used displays the gradient at the bottom of content. How would I get it to display using both top and bottom with the most minimal HTML?

I will have the content within .content so I want it the gradient to be a background image. I could add a gradient for .separator but the gradient would not appear behind the next element.

I understand I can use a background image, but I’d like to avoid that route as I have a responsive design. (Yes, I understand I can use a responsive background image, but I’d like to do this CSS-only, no images.)

Answer 1

I think this will helpful for you

html

<div class="contentTop">

</div>

<div class="separator"></div>

<div class="contentBottom">

</div>

css

.contentTop{
    height:100px;
    background:#ffffff;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #fff, #f1f1f1);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1)";   
}
.contentBottom{
    height:100px;
    background:#f5f5f5;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#fff));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #f5f5f5, #fff);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff)";   
}
.separator{
    border-top:solid 1px #eaeaea;
    height:1px;
    font-size:0;
    line-height:0;
}

here is the jsFiddle File