<!DOCTYPE html> <html lang="en"> <head> <title> CSS3 Multiple Box Shadow Effect </title> <meta charset="UTF-8"> <style> .box{ width: 200px; height: 150px; background: #2247b7cc; box-shadow: 5px 5px 10px #2247b7; } .box1{ width: 200px; height: 150px; background: blueviolet; box-shadow: 10px 5px 5px red; } .box2{ width: 200px; height: 150px; background: orange; box-shadow: 60px -16px teal; } .box3{ width: 200px; height: 150px; background: gray; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); } </style> </head> <body> <div class="box"></div><br> <br> <div class="box1"></div><br><br> <div class="box2"></div><br><br> <div class="box3"></div> </body> </html>
