CSS3 Box Shadow

« Previous Tutorial Next Tutorial »

The box-shadow property is used to attach one or more shadows to a box.

The syntax of the box-shadow property is given as follows :

box-shadow:none | [<length><length><length>? || <color>][,<length><length><length>? || <color>]+;

The description of the preceding syntax is given as follows :

CSS3 Box Shadow Example

Here is an example shows how to create shadow effect to a box using CSS3 box-shadow property:

<!DOCTYPE html>
   <title>CSS3 Box Shadow Example</title>
      div { height:150px; padding:15px; background-color:green;
         color:white; box-shadow:10px 10px 5px red; }

<div>This is a div element with a box-shadow with red colored</div>


Here is the sample output of the above CSS3 box-shadow property example code:

css3 box shadow

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.