How to fill part of the background with gradient color?
<p>I'd like to have <code>div</code> with color filled background:</p>

<ul>
<li>linear gradient from left to right</li>
<li><p>filling only 20% from the bottom of the <code>div</code>.</p>

<p>.my-div {
    background-image: linear-gradient(to right, transparent, #FFEBEE);
}</p></li>
</ul>

<p>How to define second condition?</p>

<p><a href="https://jsfiddle.net/tf4nn5p6/" rel="nofollow">https://jsfiddle.net/tf4nn5p6/</a></p>