<div> <div class="image"> <img src="https://lh4.googleusercontent.com/-0k3cgMdPCYo/VDAztzf0rDI/AAAAAAAALag/Dn1I303i8aw/s200/helmet-b.png" alt="PNG added to div."> </div> <div class="shadow"></div> </div>
.image { float:left; position:relative; width:200px; right:-200px; z-index:2; } .shadow { float:left; position:absolute; width:200px; /* Example Specific */ height:40px; /* Example Specific */ background: radial-gradient(rgba(90, 90, 90, .5), rgba(190, 190, 190, .2), rgba(255, 255, 255, .1)); margin-top:180px; /* Example Specific */ margin-left:200px; /* Example Specific */ -moz-border-radius: 300px / 20px; -webkit-border-radius: 300px / 20px; border-radius: 300px / 20px; z-index:1; }