How to apply background Gradient style css - css

Question

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">
Enrico Fratesi Shares His Vision of Form, Tradition and Renewal
</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.

Answer 1

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% );
}

Answer 2

#zl-artful-featured-title{
background: linear-gradient(
to top,
#63B4C9 35%,
#FFFFFF 70%
);
background-repeat: no-repeat;
height:260px;
width:100%;
}
<div id="zl-artful-featured-title">
<p>Content</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvbOaFeLuR9IUkcut98bJs4r7-Qm8AGcEEYiiKxiAZEiljvUS_"/>
</div>
Try this
#zl-artful-featured-title{
background-image: -webkit-linear-gradient(90deg, #63B4C9 35%, #FFFFFF 40%);
}
If not working try this
#zl-artful-featured-title{
background: linear-gradient(
to bottom,
#63B4C9 35%,
#FFFFFF 70%
);
}
Make sure you've change the # to . if your using class.
I hope it helps