How to use shadow effect on HTML elements using CSS
In this tutorial, we are going to see how to use shadow effect on HTML elements using CSS. You can use the CSS box-shadow property to implement the shading effect (like the shading style in Photoshop) to HTML elements.
Example 1 :
<!DOCTYPE html> <html> <head> <title>Use shadow effect on HTML elements using CSS</title> <style> .box { border: 1px solid; padding: 10px; box-shadow: 5px 10px #888888; } </style> </head> <body> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Example 2 :
<!DOCTYPE html> <html> <head> <title>Use shadow effect on HTML elements using CSS</title> <style> .box { border: 1px solid; padding: 10px; box-shadow: 5px 10px 20px #888888; } </style> </head> <body> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Example 3 :
<!DOCTYPE html> <html> <head> <title>Use shadow effect on HTML elements using CSS</title> <style> .box { border: 1px solid; padding: 10px; box-shadow: 5px 10px 20px #888 inset; } </style> </head> <body> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |