Use the inset keyword to apply the shadow inside of the element's box. - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. box-shadow

Introduction

Inset shadows are drawn inside the border, above the background, but below content.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 box-shadow Property</title>
  <style type="text/css">
    .box{<!--  w  ww .  j  a v a  2 s .  c om-->
        width: 150px;
        height: 150px;
        background: #ccc;
        border: 1px solid #999;
    }
  .shadow{
        box-shadow: 2px 2px 4px 2px #999;
    }
    .shadow-inside{
        box-shadow: inset 0 0 6px 2px #999;
    }
</style>
 </head>
 <body>
  <h2>Box Shadow</h2>
  <div class="box shadow"></div>
  <br>
  <h2>Box Shadow Inside</h2>
  <div class="box shadow-inside"></div>
 </body>
</html>

Related Tutorials