Home
Templates
Blog
Custom Services
Free Resources
Contact

 WEBSITE TEMPLATES       FLASH WEBSITES       CMS TEMPLATES     

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

CSS Shadows Tutorial

Learn how to create amazing shadow effects in CSS using the Box Shadow Property.

css shadows

This tutorial will teach you how to create inner and outer shadows and will give you sample code for different kind of shadows you can create using CSS. You will also learn how to make a text box with a shadow effect.

Please Note: Only if your browser supports box-shadow then you'll see the shadows below.

This div has an outer shadow. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#first{
width:250px;
height:80px;
border:4px solid #4493a0;;
margin:30px 30px;
padding:20px 12px 0 12px;
line-height:60px;
float:left;
display:inline;
text-align:center;
background:#fff;
color:#000;
box-shadow:0px 0px 50px 20px #56c6d9;;
-moz-box-shadow:0px 0px 50px 20px #56c6d9;;
-webkit-box-shadow:0px 0px 50px 20px #56c6d9;;

 }
This div has an inner shadow. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#second{
width:250px;
height:80px;
border:4px solid #85c226;;
margin:30px 30px;
padding:20px 12px 0 12px;
line-height:60px;
float:left;
display:inline;
text-align:center;
background:#fff;
color:#000;
box-shadow:inset 0px 0px 50px 20px #99dc30;;
-moz-box-shadow:inset 0px 0px 50px 20px #99dc30;;
-webkit-box-shadow:inset 0px 0px 50px 20px #99dc30;;

 }

These effects can be made using the Css Box Shadow Property. There are two types of shadow effect that are possible using Css Box Shadow Property. Look at the images above.
The first one has Css Shadow Property applied on the outer side of the div element.
The Second one has Css Shadow Property applied to it on the inside of div element.

This Property works for IE9, Opera, Firefox and Webkit browsers like Safari, Chrome.
IE9 and Opera use simillar code to display the shadow while for Firefox and Webkit Browsers, a prefix needs to be added before the code.

Lets have a look at the code:

To create Outer Shadow:

box-shadow:X-Offset Y-Offset Blur Blur-Offset Color;
Ex: box-shadow: 0px 0px 20px 10px #00CED1;

To create Inner Shadow:

box-shadow:Inset X-Offset Y-Offset Blur Blur-Offset Color;
Ex: box-shadow:inset 0px 0px 20px 10px #00CED1;

The only difference between the two codes is the keyword inset. If you put it in the code you'll get an Inner Shadow. The rest of the code is same.

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.

 

Code For <head></head> tag

Lets start by declaring width and height for the <div id=example> and then the Shadow Property. To apply shadow effect to this <div> </div> element we'll have to give it an id. Give it an id=example.
To display Shadow in Firefox a prefix -moz- needs to be added before the code. And for Webkit Browsers -webkit- needs to be added before the code.

Example:

For IE and Opera
For Mozilla Firefox
For Webkit Browsers
box-shadow: 10px 20px 30px 30px #00CED1;
-moz-box-shadow: 10px 20px 30px 30px #00CED1;
-webkit-box-shadow: 10px 20px 30px 30px #00CED1;





You should put all the three code types so that the shadow is visible on all browsers. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<head>

<style type=text/css>

#example{
width:250px;
height:80px;
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;
}


</style>

</head>

Code For <body></body> tag

Now you only have to paste this empty <div> </div> inside your <body></body> tags. 

1
2
3
4
5
6
7

<body>

<div id=example>

</div>
 
</body>

Outer Shadows

Here are some examples how you can manipulate the Outer shadow just by changing the Offset and Blur radius values.

Example
0
1
2
3
4
5

#example0{
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;

 }
Only blur radius is added here.
Example
1
1
2
3
4
5

#example1{
box-shadow:0px 0px 20px 10px #000;
-moz-box-shadow:0px 0px 20px 10px #000;
-webkit-box-shadow:0px 0px 20px 10px #000;

 }
Only Blur Radius and Blur Offset are added here.
Example
2
1
2
3
4
5

#example2{
box-shadow:20px 0px 20px 10px #000;
-moz-box-shadow:20px 0px 20px 10px #000;
-webkit-box-shadow:20px 0px 20px 10px #000;

 }
Here X-Offset, Blur Radius and Blur
Offset are added.
Example
3
1
2
3
4
5

#example3{
box-shadow:20px 20px 20px 10px #000;
-moz-box-shadow:20px 20px 20px 10px #000;
-webkit-box-shadow:20px 20px 20px 10px #000;

 }
Here X-Offset, Y-Offset, Blur Radius
and Blur Offset are added.

Inner Shadows

Example
4
1
2
3
4
5

#example4{
box-shadow:inset 0px 0px 20px 0px #000;
-moz-box-shadow:inset 0px 0px 20px 0px #000;
-webkit-box-shadow:inset 0px 0px 20px 0px #000;

 }
Only blur radius is added here.
Example
5
1
2
3
4
5

#example5{
box-shadow:0px 0px 10px 5px #000;
-moz-box-shadow:0px 0px 10px 5px #000;
-webkit-box-shadow:0px 0px 10px 5px #000;

 }
Only Blur Radius and Blur Offset are added here.
Example
6
1
2
3
4
5

#example6{
box-shadow:inset 5px 0px 5px 5px #222;
-moz-box-shadow:inset 5px 0px 5px 5px #222;
-webkit-box-shadow:inset 5px 0px 5px 5px #222;

 }
Here X-Offset, Blur Radius and Blur
Offset are added here.
Example
7
1
2
3
4
5

#example7{
box-shadow:inset 5px 5px 5px 5px #222;
-moz-box-shadow:inset 5px 5px 5px 5px #222;
-webkit-box-shadow:inset 5px 5px 5px 5px #222;

 }
Here X-Offset, Y-Offset, Blur Radius and
Blur Offset are added.

 

Textbox with Shadow Effect

Because of compatibility issues with some of the browsers will use <div id=textbox> to display this textarea.


This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property. This is made using CSS Box-Shadow Property.



Now let's see how we have made this effect:

We'll have to use the inner shadow here, with Blur Radius of about 80 px and Blur Offset set at 40px. Then we'll put some text inside the <div id=textbox> . This textbox has a fixed width and height. I've added another Css property overflow which keeps the text inside the <div id=textbox> .

Here's the code for the <head> </head> tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


<head>

<style type=text/css>

#textbox{
border:3px solid #000;;
width:540px;
height:300px;
color:#000;
background:#aaa;
overflow:scroll;
overflow-x:hidden;
margin:auto;
box-shadow:inset 0px 0px 80px 40px #000;
-moz-box-shadow:inset 0px 0px 80px 40px #000;
-webkit-box-shadow:inset 0px 0px 80px 40px #000;
}


</style>

</head>

The Explanation

Line 4 › #textbox{
→ This is the Id of to the div that we are going to use as textarea.

Line 5 › border:3px solid #000;;
→ Here 3px is the width of the border. Solid is the type of border. #000 is Hex code for Black Color.

Line 6 › width:540px;    Line 7 › height:300px;
→ Tospecify Width and height for this <div id=textbox> tag.

Line 8 › color:#000;
→ This color property changes the font color for the text inside <div id=textbox> tag.

Line 9 › background:#aaa;
→ Again this is the Hex Color Code which makes the background slightly greyish for
<div id=textbox>.

Important Line 10 › overflow:scroll;
→ This is the Css Property that makes this <div id=textbox> behave like a textarea.

Important Line 11 › overflow-x:hidden;
→ Another Extension for Css Overflow Property. It hides the horizontal scroller which was generated on line 10.

Line 12 › margin:auto;
→ Margin auto positions the <div id=textbox> in the center. (The value auto works only when width is also defined.)

Important Line 13 ›
Line 14 ›
Line 15 › box-shadow:
-moz-box-shadow:
-webkit-box-shadow: inset 0px 0px 80px 40px #000;
inset 0px 0px 80px 40px #000;
inset 0px 0px 80px 40px #000;




→ Box-shadow property for all the browsers.

Code for the <body> </body> tag.

Now you need add about 150 words or about 1000 characters inside <div id=textbox> to make this textbox scrollable. 

1
2
3
4
5
6
7
8
9
1
11
12
13
14
15
16
17
18
19
20
21

<body>

<div id=textbox>

 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 
This is made using CSS Box-Shadow Property. 

 
</div>
 
</body>

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!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!

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.


awesome css & js animated website templates

Free HTML5 Website

New CSS Tutorials

Parallax Scrolling Effect With CSS & jQuery

stacking gallery in css & jquery

overlapping menus using css & jquery

css & jquery preloader

sliding menu buttons using css and jquery

tabs using css and jquery

css form

Featured Template
Template Number: 33376
Type: JS Animated Full Site
Price: $63
View
Buy