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>fresherearth</div>
   
</body>
</html>

Output

fresherearth

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 »