CSS3 Shadow

CSS3 shadow effect can add shadow to text and to elements. Shadow property can be divided into following:

• text-shadow
• box-shadow

CSS3 Shadow-text

CSS3 text-shadow property applies shadow to text.

<style>
h1 {
    text-shadow: 3px 3px blue;
}

You can add some more effects:

h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px blue;
         }
         h3 {
            text-shadow: 2px 2px 5px yellow;
         }
         h4 {
            color: green;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }

Shadow box-property

CSS3 box-shadow property applies shadow to elements.

div {
    width: 350px;
    height: 200px;
    padding: 20px;
    background-color: red;
    box-shadow: 15x 15px;
}

We can also add blur effect to the shadow:

div {
    width: 350px;
    height: 200px;
    padding: 20px;
    background-color: red;
    box-shadow: 15x 15px 5px grey;
}