How to apply background Gradient style css

I want to apply nackground gradient style like this -> http://nimb.ws/Xq79Uw

Following is HTML code:

<div class="featured-title zl-artful-featured-title">
   <aside class="post-meta cf">
      <a aria-label="Artful Interiors" class="cat-artful-interiors" href="http://localhost/magnifissance/?cat=86">Artful Interiors</a>                                          
   </aside>
   <div class="row">
      <div class="columns medium-10">
         <div class="post-title zl-artful-interi-title">
            <a href="http://localhost/magnifissance/?p=12466">Enrico Fratesi Shares His Vision of Form, Tradition and Renewal</a>
         </div>
      </div>
      <div class="columns medium-2">
         <figure class="post-gallery "></figure>
      </div>
   </div>
</div>

Any one have a idea for this type style then please update me.

Thanks.

Solution

It looks like the gradient is on top of the image in your example. This code using pseudo elements will do that for you, vs putting the gradient code on the div itself.

#artful_interiors .post > a {
    position: relative;
}

#artful_interiors .post > a:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0,0,0,0) 50%, #000 95% );
}