html tutorial - How to apply shadow effect on elements using CSS - html5 - html code - html form



Answer: Use the CSS box-shadow property

    Using CSS box-shadow property it display the shadow effect on block-level elements.The box-shadow can applied on both inside and outside in In element's box.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>CSS Box Shadow Effect</title>
      <style type="text/css">
          .box{
              width: 180px;
              height: 180px;
              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 Searches to How to apply shadow effect on elements using CSS