Border Shadow Effect in CSS3.0

February 28th, 2010 • Related • Filed Under

Are you still using Photoshop to create a Shadow Effect for your DIV tags and setting the image in CSS ? Or Still using JavaScript to get Shadow effect for your images ? Yes ? It means you are not aware of CSS 3.0 !

Stop using Photoshop !! Use CSS 3.0 !!

One of the most coolest feature in CSS 3.0 is the Box shadow property. This gives you an awesome look for all the borders you design. Let us see the syntax first.

Syntax :
{
box-shadow: <horizontal> <vertical> <blur> <color>
}

It looks simple but powerful. The first field in the property specifies the horizontal shadow, continued by the vertical shadow. The third field in the property specifies the blur ratio, followed by the color of the shadow.

Cross Browser Compatibility :

Firefox 3.5 implements the feature as -moz-box-shadow.
Safari Browser implementing the feature as -webkit-box-shadow.
Microsoft Internet Explorer have DropShadow filter.
Opera Browser users are unlucky to view this shadow property.

Let us see some of the examples of Box-Shadow property.

Sample 1: Without Blur Effect

Code :
{
box-shadow: 5px 5px #666;
-moz-box-shadow: 5px 5px #666; // For Firefox Browser
-webkit-box-shadow:5px 5px #666;
}

Preview :

This is a Sample Box Shadow Effect [Without Blur Effect]

Sample 2: With Blur Effect

Code :
{
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow:5px 5px 5px #666;
}

Preview :

This is a Sample Box Shadow Effect [With Blur Effect]

Sample 3: With Heavy Blur Effect

Code :
{
box-shadow: 5px 5px 50px #BDBDBD;
-moz-box-shadow: 5px 5px 50px #BDBDBD;
-webkit-box-shadow:5px 5px 50px #BDBDBD;
}

Preview :

This is a Sample Box Shadow Effect [With Heavy Blur Effect]

Sample 4: With Inner Shadow Effect

Code :
{
box-shadow: 0px 0px 5px #000;
-moz-box-shadow:inset 0px 0px 5px #000;
-webkit-box-shadow:inset 0 0 5px #000;
}

Preview :

This is a Sample Box Shadow Effect [With Inner Shadow Effect]

Sample 5: With Rounded Border shadow Effect

Code :
{
box-shadow: -10px -10px 0px #000;
-moz-box-shadow:-10px -10px 0px #000;
-webkit-box-shadow:-10px -10px 0px #000;
}

Preview :

This is a Sample Box Shadow Effect [With Rounded Border shadow Effect]

You can see this feature working only in Safari 3+ and Firefox 3.1 Alpha. Other browser users wont see this feature.

So no more Jpeg/Gif/Png for Border Shadows from now. Start using CSS3.0.

Spread This Post!

Like this Post? Spead this post to your friends and family!

2 Sweet Comments

Fun Shape 3d Gift Package & Craft Box Templates. | cheapax.com

[...] Border Shadow Effect in CSS3.0 – Box-shadow Property | Rockstar template [...]
kyith on 4 September 2010

Nice article. CSS 3.0 is changing the way we design our front end.

But for the newbie designer it is difficult.

CSS 3.0 Maker allows you to design and code generate to make your design fast.