CSS3 drop shadow, 100+ best tutorials, scripts and examples
Until a while ago, web developers were forced to learn Photoshop or count with a trustful graphic designer to help them with things like shadows, gradients and stuff, this because there was no method to create these elements directly on CSS. Then the world saw the release of CSS3 with its fantastic features, which included of course making shadows.
On this post we have gathered a big list with some of the best resources to let you know a little bit more about CSS3 shadows, you will find useful tutorials, great plugins and code examples, shadow generators and a few extra links.
Our best of the best
Without wanting to sound pretentious, we’ve just released a fantastic (and FREE) CSS3 shadow generator in ThemeShock, the tool incorporates tons of features and great accessibility to help you make the most astounding shadows with CSS only.
And in case that you’re looking for some fancy text shadow effects with CSS, ThemeShock has just released an amazing CSS text effects generator where you can test different shadow effects such as neon, anaglyph, blur and more, all this while using some of the most popular web fonts around.
On this first category we have pure CSS3 shadow tutorials, we have listed a lot of useful articles that will show you how to leverage CSS3 to the maximum. Some of these posts include tips on how to create cross-browser shadows, emulate famous Photoshop effects, create text shadows and more.
This tutorial shows you how to make a beautiful set of frame boxes (more than 15) using pure CSS3 techniques, many of these boxes include awesome shadings.
Very useful article that studies the different aspects of the box-shadow property in CSS3.
One of the most helpful tutorials on the list, it explains how to migrate many CSS3 properties to older browsers including IE6.
Using the box-shadow property to emulate the static and active states, this tutorial shows how to create a beautiful button design.
Awesome tutorial that explains how to achieve Photoshop’s vignette effect using CSS3 only.
A combination of CSS3 properties and jQuery to generate a great sponsor page that recreates a nice inner shadow effect.
Although this tutorial does more than just working with shadows, it makes a great use of them to create this iPod design without using images.
This post is a summary of CSS shadow techniques and some of the possible appearances you can obtain with them.
Amazing tutorial by our friend Chris Spooner where he shows how to create great text shadow effects such as vintage, anaglyphic, pressed and more.
On this tutorial you will learn how to emulate Photoshop’s letterpress effect with CSS3.
After seeing Mike Matas’s old website, our friend Divya decided to make an improved and simpler version of these CSS3 shadows.
A primal version that recurs to plain CSS to create simple drop shadow effects, hopefully a CSS3 version of this will be released soon.
A thorough revision by the CSS3 Info team around the box-shadow property, the tutorials features examples, tutorials and a complete revision on the subject.
This article deals with one of the must recurrent headaches of web developers, making CSS3 shadows work well on Internet Explorer. The tutorial explores the best way of fixing this problem.
The author of this article exposes a good method to make CSS3 shadows look better on Internet Explorer without relying on plugins or heavy scripts.
In this six-minute video on CSS3 Text Shadows, you’ll learn all the basics about the text-shadow property, one of the nicest novelties in CSS3.
In this 5 minute video, you’ll learn about additional box-shadow features, such as multiple shadows and inset shadows. You’ll also learn some advanced techniques, such as how to create a sunken well effect.
So it has been set that CSS3 shadows are one of the most awesome things around, but what happens when you want to remove it from certain objects?.
This post takes a different approach to button design as they put aside background images and work everything straight with code.
Written by someone that evidently used to love Photoshop until discovering CSS3, this tutorial teaches you how to make beautiful elements using shadow properties.
Using CSS3 only, this tutorial teaches how to implement a nice drop shadow effect to an element.
It seems like CSS3 saved a lot of lives that were done with Photoshop, this article is a clear example as it explains how to leverage the magic CSS3 for stop relying in PS for doing elemental things such as shadows.
Useful tutorial that explains the different box-shadow styles (blurred, inset, both) along with some practical examples.
This topic shows you how to add drop shadows to the outside or inside of your layout elements by using Internet Explorer 9 and CSS3.
On this post you’re about to discover how to create fire and ice text effects or more conventional embossed text shadows using the text shadow property in CSS3.
This tutorial will show you how to create some really cool and inspiring text effects using text shadows in CSS3.
A complete study on box-shadow properties: Offset, blur, spread, distance, color and more.
Helpful tutorial that explains how to create the popular curved shadow effect that we can see in many sites nowadays using CSS3 only.
Quick study over CSS shadows accompanied with an useful explanation on how to make shadows for Internet Explorer.
Great tutorial that explains how to take advantage of CSS3 shadows to create a lovely inner shadow with a blurred effect on it.
In this two part series you’ll learn how to add CSS shadows to both text and boxes with ease.
Awesome tutorial that manages to create an astonishing 3D text through the implementation of CSS3 shadow properties.
Quick tutorial that in a few steps teaches how to create text shadows in CSS3 with ease.
For all the WordPress fans, this tutorial shows how to add beautiful CSS3 shadows to your site and also implement a CSS 2.1 compliant version to be shown in older browsers.
On this post you will see the different values for the text-shadow property, how to apply them to a text and some good examples.
A quick review on CSS3 text-shadow properties along with a few great examples that show what can be achieved without relying on images.
Based on previous CSS3 tutorials by Chris Spooner and Chris Coyier, this article assesses a nice way to utilize CSS3 shadows as hover states.
A quick review on rounded box edges, box shadows, and text shadows, all in CSS3 of course.
The title might be a little tricky, as the cross-browser term actually refers to webkit compliant, but still a really nice tutorial.
Awesome tutorial by Gordon Landry where he show us how to achieve the best inset text effect using CSS3 only, the demo works best in Google Chrome.
Helpful tutorial that covers the implementation of box-shadow and text-shadow techniques along with RGBA.
This tutorial explains how to leverage CSS3 shadows and rounded corners to create beautiful web elements like the ones displayed on the demo page.
This Spanish tutorial covers the main aspects of CSS3 shadows, including properties, browser compatibility and examples.
Another helpful Spanish tutorials that introduces text-shadow and box-shadow properties, two of the nicest properties included in CSS3.
Como agrego sombra a un texto con CSS3?
Quick tip that explains the essence of working with CSS3 text-shadow in an understandable way.
Really nice tip that teaches how to emulate the classic paper shadow effect without Photoshop but CSS3 only instead.
Awesome French tutorial about CSS3 shadows with beautiful examples with their corresponding code next to each one of them.
Amazing tutorial by the people from NetTuts+ where using nothing more than CSS3 properties they manage to create a beautiful web button design.
Thanks to text shadows, outlines, transitions and even text gradients, this tutorial is able to show you how to create an eye-catching text design with CSS3 only.
Thanks to the advanced CSS3 properties such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful with minimal effort, and this tutorial will show you how.
This section features some neat CSS3 generators that will save you a lot of trial and error time. These generators offer you many great features to create custom shadows and preview them in real time, and as if that was not enough, they also give you the resulting code ready to be pasted in your CSS.
Andy Webber brought to us this awesome CSS3 text shadow generator that upgrades the code in real time while you change the shadow using the different controllers.
And from the same author we find this great CSS3 box shadow generator with several features and real-time code.
Eric Hoffman and Peter Funk brought us this great CSS3 generator featuring the essential properties you may want wish, including a drop shadow effect.
Awesome CSS3 generator, that lets you experiment with RGBA, @font-face, box / text shadows, transitions and more.
Great CSS3 editor that allows you play with several CSS3 parameters and showing the changes in real time plus the code behind it.
CSS3 Pie makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 design features (including shadows), something quite useful for those who are forced to work with IE.
An amazing CSS3 generator with tons of customizable options, clean interface and simply great for those who want to start learning CSS.
This online application was created with the only purpose of letting you experiment with the different CSS3 properties and see what they’re capable of.
A real-time editor that through a split screen lets you get your hands into the CSS code and play with the box-shadow property and see the changes instantly.
As the previous generator created by W3Schools, this tool lets you experiment with the text-shadow property in real-time.
The approach of this tutorial is instead of having a dark inset shadow on top of the bright text, employ a bright text-shadow on the dark background.
Awesome shadow generator that works great in most browsers (except IE of course). You can adjust the offset, color and blur values while obtaining the corresponding code.
This German website offer us a simple and yet awesome CSS3 generator, you can define the X and Y properties of your shadow as well as color and spread.
Scripts and Examples
On this part of the article we find useful scripts and code examples that show how to achieve different shadow effects in CSS3, these resources are not exactly tutorials, as they go straight to the code, which can be useful when you know exactly what you want and just need to find the code.
Great box-shadow examples to use in your designs, you can find the live demo and the code source on the same link.
On this post the author displays 30 different CSS3 experiments that prove the great things that you can achieve with box-shadow, though the result can only be visualized in Chrome 11 +.
This plugin offers a method to display CSS3 shadows on IE through CSS Filter Blur and jQuery.
CSS text shadows can produce some stunning textual effects without images and on this article you’re going to find some pretty cool examples along with their syntax code.
Using the text-shadow property and nothing else, this article shows 8 different examples of what you can do with CSS3.
As part of understanding CSS3, this tutorial grabs the main features of it and strips them down.
Most tutorials talk about creating a drop shadow effect on CSS3, this one instead focuses its attention on inset shadow, which is as great as the first effect we’ve mentioned.
Useful examples that show the different things that you can do with CSS3 to create great shadow effects.
Quick tip that explains how to easily create inner shadow effects with CSS3.
This post teaches how the box-shadow mixing can be used to apply an inset or drop shadow to a block element.
Short post that indicates the benefits of CSS3 shadows as well as the way to use them.
A quick summary on CSS3 box-shadow property, you can find some useful tips to help you master this great feature.
Although CSS3 has proven to be able of recreating many of the Photoshop’s essentials, there are things that still are not as easier as you might think, one of these topics is rounded corners, which is the main theme that this article discusses.
An effective solution for CSS3 shadows on Internet Explorer thanks to our friend Christian ”Schepp” Schaefer.
Although CSS2 already give people the chance of working with shadows, the process was a little messy and not many browsers supported it. Now with CSS3 and modern web browsers, you can use box-shadow to create things like the ones displayed on this post.
This Joomla fan show us how CSS3 shadows operate and the best way of implementing them on your site.
This post explores the RGBA (Red, Green, Blue, Alpha) property and how to take advantage of it to create better shadows.
A quick review on CSS3 text shadows featuring some of the possibilities you can work with, including neon glow, blur and more.
CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. This tutorial shows you how to properly utilize the text-shadow property.
Quick tip that shows how to take advantage of box-shadow and text-shadow in CSS3 to create really nice shadings.
On this article the author starts from the basic CSS3 shadows and from there he explains how to add blur, spread and color to them.
Great list featuring several CSS3 shadow examples with different sizes, spread values and color, along with their corresponding code.
A simple and yet useful CSS3 exercise that shows how to create a nice set of web buttons using CSS3 shadows with ease.
Nice tip that explains how to get rid of CSS3 shadow on sides using RGBA instead of hex color and setting a bigger offset value in y.
Awesome jQuery plugin that automatically creates a CSS3 box-shadow for browsers that support it, for those who don’t, the plugin uses a double div technique to emulate the shadows.
On the final section of this post we have left all those useful resources that don’t fit precisely in any of the previous category or fit in more than one. You will find useful charts, video tutorials and more great tips to help you master CSS3 shadows.
This site is definitely one of the most complete CSS3 sources to understand its different properties in terms of design, functionality and more.
The W3C take on CSS text shadows in several styles, including fuzzy shadows, glossy and multiple shadows.
The official W3C documentation of CSS3 box-shadows, includes different examples, complete documentation and more.
This great video post makes a deep analysis on the advantages and disadvantages of CSS3 shadows from a SEO and web design point of view.
Very useful resource featuring a compatibility table for support of CSS3 text-shadow in desktop and mobile browsers.
The first in a series of CSS3 articles that will cover the drop shadow (box shadow) effect driven purely by CSS.
An introduction to working with CSS3 shadows, the article includes a brief introduction as well as a reference to one of the CSS3 generators that we’ve mentioned on the list.
On this Portuguese video tutorial you will learn how to make gradients and apply shadows with CSS3, really nice tutorial, specially if you’re not too much into English.
Another Portuguese article, this one explains CSS3 shadows in many aspects, including browser compatibility, syntax and more.
Although this post was published prior the release of Firefox 4, it presents a clever solution to make text-shadow work in Firefox 3,5.
One of the most complete reference articles on CSS3 shadows, it covers all the basics (IE compatibility included) while showcasing some lovely examples.
jSlickmenu creates slick menus with jQuery combined with some great CSS3 features like rotation and shadows, this plugin can really lift up your design.
And so we have reached the end of this article, more than 100 CSS3 shadow examples, tutorials, compatibility charts, etc. We hope this post can give you useful tips to help you dominate CSS3 and also make you less dependent of Photoshop’s features, don’t forget to follow us on Twitter and Facebook to find many more useful web design and development tips, thanks for reading us and we’ll see you next time.