CSS box-shadow

The CSS box-shadow property is used to define/set one or more shadows to an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{padding: 12px; border: 1px solid; box-shadow: 4px 8px gray;}
   </style>
</head>
<body>

   <div>CODESCRACKER</div>
   
</body>
</html>
Output
CODESCRACKER

CSS box-shadow Syntax

The syntax of box-shadow property in CSS, is:

box-shadow: horizontal-offset vertical-offset blur spread color inset;

The first two parameters are required. Now let me define all these 5 parameters:

Note - The other three keywords that can also be used to define the box-shadow property in CSS are none, initial, and inherit. The none is used not to apply shadow. The initial is used to use the default value. The inherit is used to use the value inherited by the parent element.

CSS box-shadow Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 30px 10px; border: 1px solid; padding: 12px;}
      div.a{box-shadow: 4px 10px;}
      div.b{box-shadow: -4px -10px;}
      div.c{box-shadow: 6px 6px red;}
      div.d{box-shadow: -6px -6px red;}
      div.e{box-shadow: 6px 6px 6px red;}
      div.f{box-shadow: 6px 6px 14px red;}
      div.g{box-shadow: 6px 6px 6px 6px red;}
      div.h{box-shadow: 6px 6px 6px 12px red;}
      div.i{box-shadow: inset 6px 6px red;}
      div.j{box-shadow: inset 6px 6px 6px red;}
      div.k{box-shadow: 4px 4px red, -4px -4px blue;}
      div.l{box-shadow: 6px 6px 6px red, -6px -6px 6px red;}
   </style>
</head>
<body>

   <div class="a">box-shadow: 4px 10px</div>
   <div class="b">box-shadow: -4px -10px</div>
   <div class="c">box-shadow: 6px 6px red</div>
   <div class="d">box-shadow: -6px -6px red</div>
   <div class="e">box-shadow: 6px 6px 6px red</div>
   <div class="f">box-shadow: 6px 6px 14px red</div>
   <div class="g">box-shadow: 6px 6px 6px 6px red</div>
   <div class="h">box-shadow: 6px 6px 6px 12px red</div>
   <div class="i">box-shadow: 6px 6px red inset</div>
   <div class="j">box-shadow: 6px 6px 16px red inset</div>
   <div class="k">box-shadow: 4px 4px red, -4px -4px blue</div>
   <div class="l">box-shadow: 6px 6px 6px red, -6px -6px 6px red</div>
   
</body>
</html>
Output
box-shadow: 4px 10px
box-shadow: -4px -10px
box-shadow: 6px 6px red
box-shadow: -6px -6px red
box-shadow: 6px 6px 6px red
box-shadow: 6px 6px 14px red
box-shadow: 6px 6px 6px 6px red
box-shadow: 6px 6px 6px 12px red
box-shadow: 6px 6px red inset
box-shadow: 6px 6px 16px red inset
box-shadow: 4px 4px red, -4px -4px blue
box-shadow: 6px 6px 6px red, -6px -6px 6px red

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!