Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > CSS Tutorials > Multiple Shadows in CSS   

Multiple Shadows in CSS - View in Firefox, Chrome etc.

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 in css

If your browser supports Css Box Shadow Property then you can see multiple colored shadows below.

Example 2
Example 1
Example 3



Multiple shadows can be made using the same code that is used for making single shadow.
To make these multiple shadows we just need to define multiple shadow value and seperate 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.

Lets have a look at the code syntax

To create Shadow:

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


Inset

X-Offset

Y-Offset

Blur

Blur-Offset

Color
: To create an inner shadow.
  (do not write this keyword to create outer shadow. )
: Shifts the shadow horzontally along the X-axis.

: Shifts the shadow vertically along the Y-axis.

: Blur Radius for Radial Bluring effect on the shadow.
  (0 is min value with no blur effect.)
:(optional) Offsets the Blur Radially.

: 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;

 

ImportantFor Multiple Shadow the values are seperated by commas.


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.

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.
1
2
3
4
5
6
7
<body>
<div id=sample> </div>
</body>

 

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

Now we'll have to write Css codes for the div refering to its id=sample .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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 ›
Line 18 ›
Line 27 ›
box-shadow:
-moz-box-shadow:
-webkit-box-shadow:
Multiple shadow values seperated by comma.
Multiple shadow values seperated by comma.
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.
Image 1

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 negetive Y Offset value.

Line 12 › inset -10px -10px 20px 10px #FF4500 ,
→ This code creates a 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 remains 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.

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.
1
2
3
4
5
#example3{
border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;
}


Now lets 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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 ›
Line 23 ›
Line 34 ›
box-shadow:
-moz-box-shadow:
-webkit-box-shadow:
Multiple shadow values seperated by comma.
Multiple shadow values seperated by comma.
Multiple shadow values seperated 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>.
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.
Line 13 › inset 0 0 12px 10px #1E90FF ,
→ Light Blue(#1E90FF) Colored Blur radius is set to 12 pixel and offset at 10 pixel.
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.
Line 15 › 0 0 4px 10px #333333 ,
→ Grey(#333333) Colored Blur radius is set to 4 pixel and offset at 10 pixel.
Line 16 › 0 0 6px 15px #AAAAAA ,
→ Light Grey(#AAAAAA) Colored Blur radius is set to 6 pixel and offset at 15 pixel.
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.
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.
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.
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.
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.
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.

Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Responsive Website Design? Choose from over 2000 templates!

Free HTML5 Website

Featured Template
Template # 51713
Type: Moto CMS HTML
Price: $139