Shadow properties in CSS3

How to create shadow using CSS3?

Shadow

It creates shadow using properties

text-shadow
box-shadow

Textshadow

It creates text with shadow

<p><i>Creates the text with shadow</i></p>
    <h1 style="text-shadow:2px 2px;color:blue">TechFunda</h1>

In the above code snippet we have defined textshadow to create shadow by using value (2px 2px)

output

Text shadow effect

It creates the shadow color

 <p><i>Creates the text with shadow</i></p>
    <h1 style="text-shadow:2px 2px yellow;">TechFunda</h1>

text shadow effect

In the above code snippet we have defined textshadow by giving the value (2px 2px yellow), which creates shadow with yellow color

output

Multiple text shadow

We can create multiple text shadow by using shadow properties

  <p>Multiple textshadow</p>
    <h1 style="text-shadow: 2px 10px 2px red, 10px 0 15px green, 10px 0 5px yellow;color:blue;">TechFunda</h1>

Multiple text shadow

In the above code snippet we have defined the multiple shadow properties with three different shadow color properties as

text-shadow: 2px 10px 2px red, 10px 0 15px green, 10px 0 5px yellow, creates three shadows

output

Box shadow

It creates the box as shadow

 <p>Multiple textshadow</p>
    <h1 style="box-shadow:12px 12px; height:100px; width:300px;background-color:green;text-align:center;color:orange">TechFunda</h1>

Box shadow

In the above code snippet we have given the box with height, width, color, background and we are giving box shadow as 12px 12px

output

Box shadow effect

It creates shadow with color

<style>
        h1{
            height:100px;
            width:300px;
            background-color:red;
            color:white;
            box-shadow:12px 12px blue;
        }
    </style>
</head>
<body>
    <p>Box shadow effect with color</p>
    <h1>TechFunda</h1>
</body>

Box shadow effects

In the above code snippet we created box shadow effects with adding color to the shadow as (12px 12px blue), creates background color to the shadow with blue color

output