Online Snippets Library

Create box shadow using CSS

To create box shadow effect, We will use CSS3 box shadow property.box-shadow property is supported by all latest browser like Opera, Firefox, Safari, Chrome.To set more than one shadow to an element, add a comma-separated list of shadows.

Syntax

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

The horizontal offset:first value set border-radius to top-left, second value set border-radius to top-right, third value set border-radius to bottom-right, and fourth value set border-radius to bottom-left corner.

The vertical offset: first value applies set border-radius to top-left, second value set border-radius to top-right and bottom-left, and third value set border-radius to bottom-right.

The blur radius (optional): first value set border-radius to top-left and bottom-right corner, and the second value set border-radius to top-right and bottom-left corner

The spread radius : Set border-radius to all four corners equally.

Example

<!DOCTYPE html>
<html>
<head>
<title>Set border-radius in CSS | Tutsway.com</title>
<style type="text/css">
#boxshadow1{
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px;
}

#boxshadow2 {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
}

#boxshadow3 {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px red;
}
</style>
</head>
<body>

<h2>box-shadow: 5px 10px:</h2>
<div id="example1">
<p>A div element with a shadow. The first value is the horizontal
offset and the second value is the vertical offset. The shadow color will
be inherited from the text color.</p>
</div>

<h2>box-shadow: 5px 10px #888888:</h2>
<div id="example2">
<p>You can also define the color of the shadow. Here the shadow color is grey.</p>
</div>

<h2>box-shadow: 5px 10px red:</h2>
<div id="example3">
<p>A red shadow.</p>
</div>

</body>
</html>