Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> img { width: 200px; } .box-shadow { float: left; box-shadow: 7px 7px 7px #666666; } .drop-shadow { float: right; } .drop-shadow img { filter: drop-shadow(7px 7px 7px #666666); -webkit-filter: drop-shadow(7px 7px 7px #666666); } </style> </head> <body> <h2>Difference between box-shadow and drop-shadow</h2> <div class="images"> <div class="box-shadow"> <p>Box-shadow <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" /> </p> </div> <div class="drop-shadow"> <p>Drop-shadow <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" /> </p> </div> </div> </body> </html>