Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
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.
Open CSS3 Shadow Generator
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.
Open CSS Text Effects Generator
Tutorials
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.
Advanced pure CSS3 boxes without using images
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.
Box-shadow: shadow effect on elements in CSS3
Very useful article that studies the different aspects of the box-shadow property in CSS3.
Cross-browser CSS3 box-shadow
One of the most helpful tutorials on the list, it explains how to migrate many CSS3 properties to older browsers including IE6.
Create a Slick CSS3 Button with box-shadow and RGBA
Using the box-shadow property to emulate the static and active states, this tutorial shows how to create a beautiful button design.
Vignettes with CSS3 Box Shadows
Awesome tutorial that explains how to achieve Photoshop’s vignette effect using CSS3 only.
Sponsor Flip Wall With jQuery & CSS
A combination of CSS3 properties and jQuery to generate a great sponsor page that recreates a nice inner shadow effect.
Experiment: Realistic iPod with CSS3
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.
How to Create CSS Drop Shadows Without Images
This post is a summary of CSS shadow techniques and some of the possible appearances you can obtain with them.
Using CSS Text-Shadow to Create Cool Text Effects
Amazing tutorial by our friend Chris Spooner where he shows how to create great text shadow effects such as vintage, anaglyphic, pressed and more.
Create a Letterpress Effect with CSS Text-Shadow
On this tutorial you will learn how to emulate Photoshop’s letterpress effect with CSS3.
Drop Shadows with CSS3
After seeing Mike Matas’s old website, our friend Divya decided to make an improved and simpler version of these CSS3 shadows.
Drop shadow with CSS for all web browsers
A primal version that recurs to plain CSS to create simple drop shadow effects, hopefully a CSS3 version of this will be released soon.
Box-shadow, one of CSS3′s best new features
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.
CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?
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.
An Option to Mimic CSS3 Text Shadow in Internet Explorer
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.
Text shadows with CSS3
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.
CSS3 Advanced Box Shadows
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.
CSS3 Tip: Removing Box Shadows
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?.
Shadow Boxing: Image-free, CSS3, Glossy Buttons
This post takes a different approach to button design as they put aside background images and work everything straight with code.
How to create slick effects with CSS3 box-shadow
Written by someone that evidently used to love Photoshop until discovering CSS3, this tutorial teaches you how to make beautiful elements using shadow properties.
Realistic CSS3 Box Shadows
Using CSS3 only, this tutorial teaches how to implement a nice drop shadow effect to an element.
CSS3 Text Shadow
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.
CSS3: Box-shadow and inset-shadow
Useful tutorial that explains the different box-shadow styles (blurred, inset, both) along with some practical examples.
How to Add Drop Shadows with CSS3
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.
CSS3 Drop Shadow Text in Dreamweaver
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.
Cool Text Effects Using CSS3 Text-Shadow
This tutorial will show you how to create some really cool and inspiring text effects using text shadows in CSS3.
CSS3 Tutorials: Box Shadow Effect
A complete study on box-shadow properties: Offset, blur, spread, distance, color and more.
Slick CSS3 Image Drop Shadows
Helpful tutorial that explains how to create the popular curved shadow effect that we can see in many sites nowadays using CSS3 only.
CSS Box Shadow
Quick study over CSS shadows accompanied with an useful explanation on how to make shadows for Internet Explorer.
CSS3 From Scratch: Make Blurred Shadow Inside The Box
Great tutorial that explains how to take advantage of CSS3 shadows to create a lovely inner shadow with a blurred effect on it.
How-to: CSS3 shadow effects – Part One
In this two part series you’ll learn how to add CSS shadows to both text and boxes with ease.
CSS3 Text Shadows
Awesome tutorial that manages to create an astonishing 3D text through the implementation of CSS3 shadow properties.
How To Create Text Shadows in CSS3
Quick tutorial that in a few steps teaches how to create text shadows in CSS3 with ease.
CSS3 box-shadow to enhance your WordPress website
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.
Add shadow to your text in CSS3
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.
How to CSS3 Text Shadow
A quick review on CSS3 text-shadow properties along with a few great examples that show what can be achieved without relying on images.
Using CSS3 Text Shadow for Active Link States
Based on previous CSS3 tutorials by Chris Spooner and Chris Coyier, this article assesses a nice way to utilize CSS3 shadows as hover states.
CSS3 rounded box corners, box shadows, and text shadows
A quick review on rounded box edges, box shadows, and text shadows, all in CSS3 of course.
CSS3 cross-browser box-shadow
The title might be a little tricky, as the cross-browser term actually refers to webkit compliant, but still a really nice tutorial.
Creating a True Inset Text Effect Using CSS3
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.
Shadows and CSS3
Helpful tutorial that covers the implementation of box-shadow and text-shadow techniques along with RGBA.
Rounded Corners, Drop Shadows, Opacity & CSS3
This tutorial explains how to leverage CSS3 shadows and rounded corners to create beautiful web elements like the ones displayed on the demo page.
Sombras en CSS3 con box-shadow
This Spanish tutorial covers the main aspects of CSS3 shadows, including properties, browser compatibility and examples.
Utilizando CSS3 hoy: Sombras
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.
Paper Shadow Effect in CSS3
Really nice tip that teaches how to emulate the classic paper shadow effect without Photoshop but CSS3 only instead.
Ombres avancées avec CSS3 et box-shadow
Awesome French tutorial about CSS3 shadows with beautiful examples with their corresponding code next to each one of them.
Build Awesome Practical CSS3 Buttons
Amazing tutorial by the people from NetTuts+ where using nothing more than CSS3 properties they manage to create a beautiful web button design.
CSS3 Typography that you’d Swear was made in Photoshop
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.
Design a Prettier Web Form with CSS3
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.
Quick Tip: Getting Clever with CSS3 Shadows
This tutorial by NetTuts+ explains how by simply detaching a CSS3 shadow from an element, you can transform it in very creative ways.
Generators
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.
CSS3 Text Shadow Generator
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.
CSS3 Box Shadow Generator
And from the same author we find this great CSS3 box shadow generator with several features and real-time code.
CSS3 Generator
Eric Hoffman and Peter Funk brought us this great CSS3 generator featuring the essential properties you may want wish, including a drop shadow effect.
CSS3 Generator
Awesome CSS3 generator, that lets you experiment with RGBA, @font-face, box / text shadows, transitions and more.
CSS3 Maker
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
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.
CSS3 Linear Gradient Button Generator
An amazing CSS3 generator with tons of customizable options, clean interface and simply great for those who want to start learning CSS.
CSS3 Playground
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.
Tryit Editor v1.4 (Box Shadow)
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.
Tryit Editor v1.4 (Text Shadow)
As the previous generator created by W3Schools, this tool lets you experiment with the text-shadow property in real-time.
CarveMe
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.
Box Shadows
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.
Box Shadow Generator
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.
Pure CSS3 box-shadow page curl effect
Great box-shadow examples to use in your designs, you can find the live demo and the code source on the same link.
CSS3 box shadows, tips and examples
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 +.
CSS3 Text-Shadow
This plugin offers a method to display CSS3 shadows on IE through CSS Filter Blur and jQuery.
CSS3 Text Shadows
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.
8 CSS3 text-shadow effects
Using the text-shadow property and nothing else, this article shows 8 different examples of what you can do with CSS3.
CSS3: Rotations, Shadows, Rounded Edges & Animations
As part of understanding CSS3, this tutorial grabs the main features of it and strips them down.
CSS3 Box Shadow and Inset Shadow
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.
CSS3′s Box-Shadow Adds Drop Shadows, Inner Shadows
Useful examples that show the different things that you can do with CSS3 to create great shadow effects.
CSS3 inner shadow
Quick tip that explains how to easily create inner shadow effects with CSS3.
Compass Box Shadow
This post teaches how the box-shadow mixing can be used to apply an inset or drop shadow to a block element.
Using CSS3 Text-Shadow
Short post that indicates the benefits of CSS3 shadows as well as the way to use them.
Quick Tips for CSS3 Box Shadow
A quick summary on CSS3 box-shadow property, you can find some useful tips to help you master this great feature.
CSS Box-shadow rolled corners
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.
CSS3 Box-Shadow for Legacy IEs
An effective solution for CSS3 shadows on Internet Explorer thanks to our friend Christian ”Schepp” Schaefer.
CSS3 Box Shadow
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.
CSS3 – Box Shadow
This Joomla fan show us how CSS3 shadows operate and the best way of implementing them on your site.
Start Using CSS3: RGBa and better shadows
This post explores the RGBA (Red, Green, Blue, Alpha) property and how to take advantage of it to create better shadows.
CSS3 Text-Shadow Preview
A quick review on CSS3 text shadows featuring some of the possibilities you can work with, including neon glow, blur and more.
Text-shadow, Photoshop like effects using CSS
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.
Sombras en CSS3
Quick tip that shows how to take advantage of box-shadow and text-shadow in CSS3 to create really nice shadings.
Fun With Box Shadows
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.
CSS3 box-shadow examples
Great list featuring several CSS3 shadow examples with different sizes, spread values and color, along with their corresponding code.
Simple CSS3 buttons using box-shadow & border-radius
A simple and yet useful CSS3 exercise that shows how to create a nice set of web buttons using CSS3 shadows with ease.
Can CSS3 box-shadow:inset do only one or two sides?
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.
jQuery Drop Shadow Plugin Revisited
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.
Others
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.
CSS3 Files
This site is definitely one of the most complete CSS3 sources to understand its different properties in terms of design, functionality and more.
CSS tips & tricks
The W3C take on CSS text shadows in several styles, including fuzzy shadows, glossy and multiple shadows.
The ‘Box-shadow’ property
The official W3C documentation of CSS3 box-shadows, includes different examples, complete documentation and more.
Web Design with CSS3 Text Shadows
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.
When can I use CSS3 Text-shadow?
Very useful resource featuring a compatibility table for support of CSS3 text-shadow in desktop and mobile browsers.
Pure CSS Drop Shadows Using CSS3 the box-shadow attribute
The first in a series of CSS3 articles that will cover the drop shadow (box shadow) effect driven purely by CSS.
Designing with CSS – Box Shadow
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.
CSS3 Gradiente e Box Shadow
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.
CSS3 – Sombras em textos
Another Portuguese article, this one explains CSS3 shadows in many aspects, including browser compatibility, syntax and more.
Sombras: la propiedad text-shadow
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.
Les ombrages en CSS3
One of the most complete reference articles on CSS3 shadows, it covers all the basics (IE compatibility included) while showcasing some lovely examples.
jSlickmenu: A jQuery plugin for slick CSS3 menus
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.
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
May 10th
A great selection of tutorials… Some great time savers here :)
I can’t wait for IE to support CSS3!
May 10th
Thanks, it’s a shame that IE still does not fully support CSS3…
May 11th
Excellent collections.. This tutorials through we can get more detail about this.. Thanks for this..
May 11th
You’re welcome, please let us know if you know any other useful resource…
May 11th
This is interesting information share over here. CSS3 shadows, you will acquisition advantageous tutorials, abundant
plugins and cipher examples, adumbration generators and a few added
links.
directory submission
May 11th
Thanks for your comment, please let us know if you find any other useful resource…
May 11th
Your research and informative labor has been a very valuable one for the design community. Thanks.
May 11th
Thank you Will for your kind words!
May 13th
Wow, so many good and useful tutorials for CSS, thanks :)
May 13th
Wow, so many good and useful tutorials for CSS, thanks :)
May 13th
Thanks Vladimir, your comments always cheer up our days, let us know if you know about any other useful resource ;)…
May 13th
Thanks for quotation of my work :)
Very good collection !
May 13th
Thanks Geoffrey, you’re doing an awesome job for the web design community…
May 15th
太全了，给力啊。。。
May 16th
Thanks Kainy, are there any other resources you know about?…
May 19th
Once again, thank you very much for this resource! Really saves a lot of time on researching :)
May 19th
You’re welcome pal, thanks for your comment…
May 23rd
Impressive roundup! Thanks for
May 23rd
You’re welcome Catalin, we’re glad you liked the article :). Please let us know if you know any other useful tool for working with CSS3 shadows…
July 26th
Glad you liked my post on CSS3 text shadows. Cheers.
July 28th
Thanks mate!, which one is yours?…
August 5th
CSS Drop shadow methods CSS Inset Drop Shadow
September 13th
Glad you like it a Anjii!
August 21st
It’s amazing, I can’t believe CSS3 can create these realistic effect :D
October 26th
Wow, this was a really nice collection. I loved it… thanks
November 9th
Re: Open CSS3 Shadow Generator – I have multiple images of varying dimensions. Can this code adapt to that? As is it does not. Not a coder so I know nothing about how to do it myself. Thank you!
December 20th
You definitely know how to bring an issue to light and make it important. More people need to read this and understand this side of the story.
December 20th
Thank you for the recognition to our work. Best regards.
March 19th
I like this informative article. Thank you very much for providing this kind of information.
April 3rd
Excellent Guide for CSS style. A lot more need to learn by seeing this article. Very helpful for me.
April 16th
Hi Krishna, we are glad you find this article useful.
December 7th
My favorite resource to speed up CSS3 dev is: http://css3generator.com/ has a box-shadow and text-shadow generator.
January 21st
Great tool, thanks for sharing.
September 13th
Oh yeah, fabluuos stuff there you!
CSS3 drop shadow http://bit.ly/pm5cCw
CSS3 drop shadow http://t.co/QZBaisp
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/kBN579i5 via @webdesignshock
RT @tisnadocom: http://t.co/dUEoWwL5 CSS3 drop shadow, 100+ best tutorials, scripts and examples via @webDesignShock
RT @tisnadocom http://t.co/PCHr3KIX CSS3 drop shadow, 100+ best tutorials, scripts and examples via @webDesignShock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/RNbL0HUr
CSSのドロップシャドウ集か。
将来は画像で作ることもなくなりそうだ。
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/bqaXgcYl via @webdesignshock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/zY22CMUN via @webdesignshock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/ZXXHgnfK via @webdesignshock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/Ld5kycS8 via @webdesignshock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/gbgNJmsi via @webdesignshock
CSS3 drop shadow, 100+ best tutorials, scripts and examples http://t.co/p8fEQcbw via @webdesignshock