"container box-shadow gradient"
Bootstrap 4.1.1 Snippet by blackgirl

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="gradient-shadow"></div> <div class="container shadow-box"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum suscipit nulla, ac faucibus neque pulvinar nec. Proin condimentum, risus at venenatis ultricies, nulla nibh gravida sem, auctor consectetur leo orci a nulla.</p> <p>Quisque nec dapibus odio, ac feugiat magna. Donec feugiat quis justo non tempor. Vestibulum pellentesque vehicula odio, et pharetra nibh finibus non.</p> <p>Sed ornare ante enim, tristique auctor lorem consectetur id. Proin non euismod erat. Phasellus dapibus nisl hendrerit orci pretium, feugiat sodales nulla consequat.</p> <p>Sed vitae lorem et nisl posuere semper. In egestas, massa sit amet convallis suscipit, erat ex hendrerit lorem, id elementum sapien metus lacinia nunc. Mauris magna lacus, commodo in velit a, auctor facilisis orci. Nunc vehicula placerat hendrerit. Sed egestas nunc vel nisi tempus ullamcorper. Maecenas hendrerit odio consectetur, porttitor metus vel, malesuada lacus.</p> <p>Vivamus quis sollicitudin arcu, eget elementum orci. Cras eu urna elit. Praesent justo lacus, lobortis id lobortis quis, ornare eget odio. Suspendisse sollicitudin dolor eget metus lacinia porttitor. Phasellus tristique porttitor dignissim.</p> <h1>Praesent eget vulputate urna</h1> <p>Praesent eget vulputate urna. Integer tincidunt mauris sapien, eget hendrerit odio laoreet vitae. Aenean dapibus bibendum dolor in mattis. Phasellus varius iaculis magna. Cras nec libero a velit consequat laoreet a sit amet ligula.</p> </div>
.gradient-shadow { background: rgba(0, 0, 0, 0.2); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, #fff 100%); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%,#fff 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%,#fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.2)', endColorstr='#fff',GradientType=1 ); filter: blur(2px); width: 755px; height: 500px; position: relative; left: 0px; top: 10px; margin: 0 auto; } .shadow-box { width: 750px; background: #fff; padding: 20px; position: relative; margin-top: -485px; height: 500px; }

Related: See More


Questions / Comments: