How to apply shadow effect on elements using CSS

Topic: HTML / CSS« Prev  |  Next »

Answer: Use the CSS box-shadow property

You can use the CSS box-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on block-level elements. The box-shadow can be applied on both inside and outside of the element's box.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>CSS Box Shadow Effect</title>
  • <style type="text/css">
  •     .box{
  •         width: 150px;
  •         height: 150px;
  •         background: #ccc;
  •     }
  •     .shadow-inside{
  •         -moz-box-shadow:    inset 0 0 10px #666; /* for gecko based browsers */
  •         -webkit-box-shadow: inset 0 0 10px #666; /* for webkit based browsers */
  •         box-shadow:         inset 0 0 10px #666;
  •     }
  •     .shadow-outside{
  •         -moz-box-shadow:    2px 2px 5px 3px #999;
  •         -webkit-box-shadow: 2px 2px 5px 3px #999;
  •         box-shadow:         2px 2px 5px 3px #999;
  •     }
  • </style>
  • </head> 
  • <body>
  • <div class="example">
  •     <h2>Box Shadow Inside</h2>
  •     <div class="box shadow-inside"></div>
  •     <br>
  •     <h2>Box Shadow Outside</h2>
  •     <div class="box shadow-outside"></div>
  • </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.