Creating a Box Shadow

The drop-shadow property sets a shadow for an element.

The value for the box-shadow element are:

hoffset

The horizontal offset. It is a length value.

A positive value offsets the shadow to the right. A negative value offsets the shadow to the left.

voffset

The vertical offset. It is a length value.

A positive value offsets the shadow to the bottom. A negative value offsets the shadow to the top.

blur

This value is optional. It is a length value and sets the blur radius.

The larger the value, the more blurred. Its default value is 0.

spread

This value is optional. It is a length value and set the spread radius.

Positive values make the shadow expand in all directions. Negative values cause the shadow to contract toward the box.

color

This value is optional. It sets the color of the shadow. If omitted, the browser will select a color.

inset

This value is optional. It causes the shadow to be inset inside the box.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            box-shadow: 5px 4px 10px 2px gray; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo

You may define multiple shadows in a single box-shadow declaration. The value shoule bd separated by a comma.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: