<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Drop-shadow Filter Effect</title> <style> img.shadow { -webkit-filter: drop-shadow(3px 3px 5px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(2px 2px 4px orange); } img.shadow-large { -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(4px 4px 10px orange); } /* Some CSS to beautify this example */ table td{ padding: 17px; text-align: center; } </style> </head> <body> <table> <tr> <td> <img src="examples/resources/dog.jpg" alt="dog"> </td> <td> <img class="shadow" src="examples/resources/dog.jpg" alt="dog"> </td> <td> <img class="shadow-large" src="examples/resources/dog.jpg" alt="dog"> </td> </tr> <tr> <td>Original Image</td> <td>drop-shadow(3px 3px 5px orange)</td> <td>drop-shadow(4px 4px 10px orange)</td> </tr> </table> </body> </html>