box-shadow - HTML CSS CSS Property

HTML CSS examples for CSS Property:box-shadow

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

Description

The box-shadow CSS property applies shadow effects to an element's box.

The following table summarizes the box-shadow Property.

Item Value
Default value: none
Applies to:All elements. It also applies to ::first-letter.
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


box-shadow:     shadow1 [, shadow2, ... shadowN] | none | initial | inherit 

where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

Property Values

The following table describes the values of this property.

The following values must be specified for the property to be valid.

ValueDescription
offset-x The first length value sets the horizontal distance of the shadow. A positive value draws shadows offset to the right of the box, whereas a negative value offsets the shadow to the left.
offset-y The second length value specifies the vertical distance of the shadow. A positive value offsets the shadow down, and a negative value offsets the shadow above the element.

The following values are optional.

ValueDescription
blur-radius The third length value is a blur distance. The larger this value, the bigger the blur. Default value is 0, the shadow is sharp. Negative values are not allowed.
spread-radius The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.
color color of the shadow. If not specified, it uses the color property.
inset changes the drop shadow from an outer shadow to an inner shadow.
none No shadow. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element box-shadow property.

The example below shows the box-shadow property.

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{<!--from w w w  .  j a v a  2s . 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