JSFiddle - React, Tailwind, and code Playground

by andreasisaak

HTML

<div class="knockout-top-to-bottom"><p>Bottom doesn't stretch below otherwise gradient under knockout might be visible.</p></div>

CSS

body {
    margin:100px;
}

.knockout-top-to-bottom { position: relative; } .knockout-top-to-bottom:before, .knockout-top-to-bottom:after { content: ""; position: absolute; } .knockout-top-to-bottom:before { top: -3px; left: -3px; bottom: 0; right: -3px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); z-index: -2; } .knockout-top-to-bottom:after { z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; }