Code
<html> <head> <title>Box shadows</title> <style> #box1{ width: 200px; height: 200px; background-color: plum; box-shadow: 25px 25px 30px plum; float:left; margin-right: 120px; margin-top: 40px; } #box2{ width: 200px; height: 200px; background-color: plum; box-shadow: -25px -25px 30px plum; float:right; margin-right: 120px; margin-top: 40px; } h2{ text-align: center; } </style> </head> <body> <h2> <div id="box1" > <h2>Box shadow right and bottom</h2> </div> <div id="box2" > <h2>Box shadow left and top</h2> </div> </body> </html>
Output