In this tutorial you will learn how to create some awesome shadow effects in CSS! The syntax, sample code and explantions are included below.

Multiple shadows title

Examples of Multiple colored shadows :

Multiple colored shadow examples

Multiple shadows can be made using the same code that is used for making a single shadow. To make these multiple shadows we just need to define multiple shadow values and separate them with a comma. Then we’ll position the shadows using different values for x-offset and y-offset values. The shadow value which comes last is positioned at the back of all the shadows.

Let’s have a look at the code syntax:

To create a Shadow:

box-shadow:Inset X-Offset Y-Offset Blur Blur-Offset Color;

Inset: To create an inner shadow (do not write this keyword to create outer shadow)

X-Offset: Shifts the shadow horizontally along the X-axis.

Y-Offset: Shifts the shadow vertically along the Y-axis.

Blur: Blur Radius for Radial Blurring effect on the shadow. (0 is min value with no blur effect.)

Blur-Offset: (optional) Offsets the Blur Radially.

Color: Here Color name or Hex Color Code or RGBA color
  values can be declared.

Example ››

For Single Shadow:
box-shadow: 0px 0px 20px 10px #000000;

For Multiple shadows:
box-shadow:0 0 10px 4px #0000FF , 0 0 20px 30px #008000, 30px 0 20px 30px #FF1493, -30px -30px 20px 30px #FF4500;

Important

For Multiple Shadows, the values are separated by commas.

Multiple shadows 1

Here the Blue (#0000FF) colored shadow is defined first so it is positioned at the top of other shadows.
Then the Green (#008000) colored shadow, defined with 30px Blur Offset.
Then the Pink (#FF1493) colored shadow, defined with X-Offset set at 30px;
Then at last the Orange (#FF4500) colored shadow with negetive values of X-Offset and Y-Offset, positioned at the back of all the shadows.

Example 1

Code for <body> </body> tag (Example 1)

So lets create some multiple shadows just like the Example 1 above.
First we’ll have to create a div with id=sample” inside the <body> </body> tag.

<body>
   <div id="sample">
   </div>
</body> 

Code For <head></head> tag (Example 1)

Now we’ll have to write CSS codes for the div referring to its id=”sample“.

<head>

<style type="text/css">

#sample{
width:100px;
height:100px;
margin:auto;
border:4px solid #444;
box-shadow:inset 10px 10px 20px 10px #CC0000 ,
	inset 10px -10px 20px 10px #00CC00 ,
	inset -10px -10px 20px 10px #FF4500 ,
	inset -10px 10px 20px 10px #0000CC ,
	50px 50px 50px 10px #CC0000 ,
	50px -50px 50px 10px #00CC00 ,
	-50px -50px 50px 10px #FF4500 ,
	-50px 50px 50px 10px #0000CC ;
-moz-box-shadow:inset 10px 10px 20px 10px #CC0000 ,
	inset 10px -10px 20px 10px #00CC00 ,
	inset -10px -10px 20px 10px #FF4500 ,
	inset -10px 10px 20px 10px #0000CC ,
	50px 50px 50px 10px #CC0000 ,
	50px -50px 50px 10px #00CC00 ,
	-50px -50px 50px 10px #FF4500 ,
	-50px 50px 50px 10px #0000CC ;
-webkit-box-shadow:inset 10px 10px 20px 10px #CC0000 ,
	inset 10px -10px 20px 10px #00CC00 ,
	inset -10px -10px 20px 10px #FF4500 ,
	inset -10px 10px 20px 10px #0000CC ,
	50px 50px 50px 10px #CC0000 ,
	50px -50px 50px 10px #00CC00 ,
	-50px -50px 50px 10px #FF4500 ,
	-50px 50px 50px 10px #0000CC ;
}

</style>

</head>

The Explanation (Example 1)

Line 5 › #sample {
→ This is the selector id for the div with id=”sample“, any property that we define here will be applied to any div that has an id=”sample“.

Line 6 › width:100px; Line 7 › height:100px;
→ To set width and height for this div.

Line 8 › margin:auto;
→ To position the div at the center of the screen. ( Margin:auto works only when a fixed width is also declared. )

Line 9 › border:4px solid #444;
→ To create a 4 pixel wide, solid Grey ( #444 ) colored border.

Important

Line 10 › box-shadow: Multiple shadow values seperated by comma.
Line 18 ›
-moz-box-shadow: Multiple shadow values seperated by comma.
Line 27 ›
-webkit-box-shadow: Multiple shadow values seperated by comma.

→ Here the Line 10 defines Css Box Shadow Property for IE9 and for Opera 7+.
→ Line 18 defines Css Box Shadow Property for Mozilla Firefox.
→ And Line 27 defines Css Box Shadow Property for Webkit Browsers like Safari and Google Chrome.
( The rest of the Multiple shadow values are same for all.)

Inner Shadows (Example 1)

We’ll start filling our <div id=”sample“> with inner Shadows.
As we are creating inner shadows we need to add this keyword “inset” before every value that we define.
We just need to change the values for X-Offset and Y-Offset and the color, the Blur Radius and Blur Offset values remains the same.
We’ll need to Refer to this Y-X Axis for defining positions for the shadows. This is not the regular X-Y axis.

X y axis

You can see the positive and negetive values in the brackets which represent positive or negetive ( X-Offset , Y-Offset ) values in the Quadrants.

Line 10 › inset 10px 10px 20px 10px #CC0000 ,
→ This code creates a Red ( #CC0000 ) Colored shadow in the First Quadrant with positive X and Y Offset values.

Line 11 › inset 10px -10px 20px 10px #00CC00 ,
→ This code creates a Green ( #CC0000 ) Colored shadow in the Forth Quadrant with positive X and negative Y Offset values.

Line 12 › inset -10px -10px 20px 10px #FF4500 ,
→ This code creates an Orange ( #FF4500 ) Colored shadow in the Third Quadrant with negetive X and Y Offset values.

Line 13 › inset -10px 10px 20px 10px #0000CC ,
→ This code creates a Blue ( #0000CC ) Colored shadow in the Second Quadrant with negetive X and positive Y Offset value.

Outer Shadows (Example 1)

Now we add outer shadows to our <div id=”sample“>. Now we do not need to add this keyword “inset”.
We just need to change the values for X-Offset and Y-Offset and the color, the Blur Radius and Blur Offset values remain the same.

Line 14 › 50px 50px 50px 10px #CC0000 ,
→ This code creates a Red ( #CC0000 ) Colored shadow in the First Quadrant with positive X and Y Offset values.

Line 15 › 50px -50px 50px 10px #00CC00 ,
→ This code creates a Green ( #CC0000 ) Colored shadow in the Forth Quadrant with positive X and negetive Y Offset value.

Line 16 › -50px -50px 50px 10px #FF4500 ,
→ This code creates a Orange ( #FF4500 ) Colored shadow in the Third Quadrant with negetive X and Y Offset values.

Line 17 › -50px 50px 50px 10px #0000CC;
→ This code creates a Blue ( #0000CC ) Colored shadow in the Second Quadrant with negetive X and positive Y Offset value.

Example 3

The Explanation (Example 3)

To make Shadow effects like Example 3 above.
Every thing is same as explained above for (Example 1). Just add one more Border Radius property to the (Example 1) above to get Shadow Effectes like Example 3.

Here’s the Stylesheet code for Example 3.

#example3{
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
 }  

Example 2

Now let’s try to make shadows like Example 2

Code For <head></head> tag (Example 2)

Here I’ve used 11 shadows to make the effect. First We’ll look at the code and then I’ll explain the shadow properties.

<head>

<style type=text/css>

#example2{
width:50px;
height:50px;
border:50px;
border-radius:5px solid #333;
-moz-border-radius:50px;
-webkit-border-radius:50px;
box-shadow:inset 0 0 12px 4px #0000FF,
	inset 0 0 12px 10px #1E90FF,
	inset 0 0 12px 17px #9932CC,
	0 0 4px 10px #333333,
	0 0 6px 15px #AAAAAA,
	0px -20px 50px 50px #CC0000,
	0px -20px 12px 50px #333333,
	-20px 30px 50px 50px #00CC00,
	-20px 30px 12px 50px #333333,
	20px 30px 50px 50px #FFD700,
	20px 30px 12px 50px #333;
-moz-box-shadow:inset 0 0 12px 4px #0000FF,
	inset 0 0 12px 10px #1E90FF,
	inset 0 0 12px 17px #9932CC,
	0 0 4px 10px #333333,
	0 0 6px 15px #AAAAAA,
	0px -20px 50px 50px #CC0000,
	0px -20px 12px 50px #333333,
	-20px 30px 50px 50px #00CC00,
	-20px 30px 12px 50px #333333,
	20px 30px 50px 50px #FFD700,
	20px 30px 12px 50px #333;
-webkit-box-shadow:inset 0 0 12px 4px #0000FF,
	inset 0 0 12px 10px #1E90FF,
	inset 0 0 12px 17px #9932CC,
	0 0 4px 10px #333333,
	0 0 6px 15px #AAAAAA,
	0px -20px 50px 50px #CC0000,
	0px -20px 12px 50px #333333,
	-20px 30px 50px 50px #00CC00,
	-20px 30px 12px 50px #333333,
	20px 30px 50px 50px #FFD700,
	20px 30px 12px 50px #333;
}

</style>

</head>

The Explanation (Example 2)

Line 5 › #sample {
→ This is the selector id for the div with id=sample, any property that we define here will be applied to any div that has an id=sample.

Line 6 › width:100px; Line 7 › height:100px;
→ To set width and height for this div.

Line 8 › margin:auto;
→ To position the div at the center of the screen. ( Margin:auto works only when a fixed width is also declared. )

Line 9 › border:5px solid #333;
→ To create a 5 pixel wide, solid Grey ( #333 ) colored border.

Important

 
Line 12 › -moz-box-shadow: Multiple shadow values separated by comma.
Line 23 ›
-webkit-box-shadow: Multiple shadow values separated by comma.
Line 34 ›
box-shadow: Multiple shadow values separated by comma.

→ Here the Line 12 defines Css Box Shadow Property for IE9 and for Opera 7+.
→ Line 23 defines Css Box Shadow Property for Mozilla Firefox.
→ And Line 34 defines Css Box Shadow Property for Webkit Browsers like Safari and Google Chrome.
( The rest of the Multiple shadow values are same for all.)

Inner Shadows (Example 2)

We will start adding the inner shadows to the <div> with id=”example2″ i.e. <div id=”example2″>.

Inner shadow 1
Line 12 › inset 0 0 12px 4px #0000FF ,
→ Here the X-offset and Y-offset Values are set to zero so the shadow is at the central position.
→ Blue (#0000ff) Colored Blur radius is set to 12 pixel and offset at 4 pixel.
 
Inner shadow 2
Line 13 › inset 0 0 12px 10px #1E90FF ,
→ Light Blue(#1E90FF) Colored Blur radius is set to 12 pixel and offset at 10 pixel.
Inner shadow 3
Line 14 › inset 0 0 12px 17px #9932CC ,
→ Violet(#9932CC) Colored Blur radius is set to 12 pixel and offset at 10 pixel.

Outer Shadows (Example 2)

Now we’ll fill the outer shadows.

Outer shadow 1
Line 15 › 0 0 4px 10px #333333 ,
→ Grey(#333333) Colored Blur radius is set to 4 pixel and offset at 10 pixel.
Outer shadow 2
Line 16 › 0 0 6px 15px #AAAAAA ,
→ Light Grey(#AAAAAA) Colored Blur radius is set to 6 pixel and offset at 15 pixel.
Outer shadow 3
Line 17 › 0px -20px 50px 50px #CC0000 ,
→ Negetive Y-offset of -20 pixel is set for this shadow.
→ Red (#CC0000) Colored Blur radius is set to 50 pixel and offset at 50 pixel.
Outer shadow 4
Line 18 › 0px -20px 12px 50px #333333 ,
→ Negetive Y-offset of -20 pixel is set for this shadow.
→ Grey (#333333) Colored Blur radius is set to 12 pixel and offset at 50 pixel.
 Outer shadow 5
Line 19 › -20px 30px 50px 50px #00CC00 ,
→ Negetive X-offset of -20 pixel and Positive X-offset of 30 pixel is set for this shadow.
→ Greeen (#00CC00) Colored Blur radius is set to 50 pixel and offset at 50 pixel.
Outer shadow 6
Line 20 › -20px 30px 12px 50px #333333 ,
→ Negetive X-offset of -20 pixel and Positive X-offset of 30 pixel is set for this shadow.
→ Grey (#333333) Colored Blur radius is set to 12 pixel and offset at 50 pixel.
Outer shadow 7
Line 21 › 20px 30px 50px 50px #FFD700 ,
→ Positive X-offset of 20 pixel and Positive X-offset of 30 pixel is set for this shadow.
→ Yellow (#FFD700) Colored Blur radius is set to 50 pixel and offset at 50 pixel.
Outer shadow 8
Line 20 › 20px 30px 12px 50px #333333 ,
→ Positive X-offset of 20 pixel and Positive X-offset of 30 pixel is set for this shadow.
→ Grey (#333333) Colored Blur radius is set to 12 pixel and offset at 50 pixel.

This is the best way to change the looks of your website, as it needs no images, It’s made in Pure CSS Coding. This Box Shadow may have some compatibility issues with the old browsers, but runs perfectly on the Latest Browsers.

 

CSS Tutorials and Resources


Pinterest