I am looking to create a div with a background and overlay effect. Here is what I have done so far: https://i.sstatic.net/hVkBd.jpg
I want it to look like this: https://i.sstatic.net/rQvcm.jpg
body {
background: blue;
}
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
background-color: #000000;
}
.background {
padding: 20px;
background: #ffffff;
background: -moz-linear-gradient(center top, #ffffff 50%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, #ffffff), color-stop(1, #e5e5e5));
background: -o-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
}<section class="background">
<div class="wrap"></div>
</section>