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:

  • horizontal-offset - A positive value given to this parameter, to define a shadow on the right side, whereas a negative value given to this parameter, to define a shadow on the left side, of specified element
  • vertical-offset - A positive value given to this parameter, to define a shadow below the element or box, whereas a negative value given to this parameter, to define a shadow above the element or box
  • blur - This parameter is used to define the blur radius. Higher value will blur the shadow at more intensity
  • spread - This parameter is used to define the spread radius. A positive value given to this parameter, increases the shadow spread, whereas a negative values given to this parameter, decreases the shadow spread
  • color - This parameter is used to define/set color of the shadow. The default value of this parameter is the color of the text
  • inset - This parameter is used to convert the shadow from outer to inner. That is, use this keyword to create shadow to the content area of specified element, or simple inside the border area of specified element

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 »

Follow/Like Us on Facebook




Subscribe Us on YouTube