CSS3 drop shadow, 100+ best tutorials, scripts and examples | Bypeople

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.

CSS3 drop shadow

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

    css3shadows01

    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

    css3shadows02

    Very useful article that studies the different aspects of the box-shadow property in CSS3.

    Cross-browser CSS3 box-shadow

    css3shadows03

    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

    css3shadows04

    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

    css3shadows05

    Awesome tutorial that explains how to achieve Photoshop’s vignette effect using CSS3 only.

    Sponsor Flip Wall With jQuery & CSS

    css3shadows06

    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

    css3shadows07

    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

    css3shadows08

    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

    css3shadows09

    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

    css3shadows10

    On this tutorial you will learn how to emulate Photoshop’s letterpress effect with CSS3.

    Drop Shadows with CSS3

    css3shadows11

    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

    css3shadows12

    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

    css3shadows13

    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?

    css3shadows14

    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

    css3shadows15

    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

    css3shadows16

    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

    css3shadows17

    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

    css3shadows18

    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

    css3shadows19

    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

    css3shadows20

    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

    css3shadows21

    Using CSS3 only, this tutorial teaches how to implement a nice drop shadow effect to an element.

    CSS3 Text Shadow

    css3shadows22

    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

    css3shadows23

    Useful tutorial that explains the different box-shadow styles (blurred, inset, both) along with some practical examples.

    How to Add Drop Shadows with CSS3

    css3shadows24

    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

    css3shadows25

    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

    css3shadows26

    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

    css3shadows27

    A complete study on box-shadow properties: Offset, blur, spread, distance, color and more.

    Slick CSS3 Image Drop Shadows

    css3shadows28

    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

    css3shadows52

    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

    css3shadows29

    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

    css3shadows30

    In this two part series you’ll learn how to add CSS shadows to both text and boxes with ease.

    CSS3 Text Shadows

    css3shadows31

    Awesome tutorial that manages to create an astonishing 3D text through the implementation of CSS3 shadow properties.

    How To Create Text Shadows in CSS3

    css3shadows32

    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

    css3shadows33

    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

    css3shadows34

    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

    css3shadows35

    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

    css3shadows36

    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

    css3shadows37

    A quick review on rounded box edges, box shadows, and text shadows, all in CSS3 of course.

    CSS3 cross-browser box-shadow

    css3shadows38

    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

    css3shadows78

    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

    css3shadows81

    Helpful tutorial that covers the implementation of box-shadow and text-shadow techniques along with RGBA.

    Rounded Corners, Drop Shadows, Opacity & CSS3

    css3shadows82

    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

    css3shadows83

    This Spanish tutorial covers the main aspects of CSS3 shadows, including properties, browser compatibility and examples.

    Utilizando CSS3 hoy: Sombras

    css3shadows85

    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?

    css3shadows90

    Quick tip that explains the essence of working with CSS3 text-shadow in an understandable way.

    Paper Shadow Effect in CSS3

    css3shadows91

    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

    css3shadows92

    Awesome French tutorial about CSS3 shadows with beautiful examples with their corresponding code next to each one of them.

    Build Awesome Practical CSS3 Buttons

    css3shadows98

    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

    css3shadows99

    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

    css3shadows100

    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

    css3shadows101
    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

    css3shadows39

    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

    css3shadows40

    And from the same author we find this great CSS3 box shadow generator with several features and real-time code.

    CSS3 Generator

    css3shadows41

    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

    css3shadows42

    Awesome CSS3 generator, that lets you experiment with RGBA, @font-face, box / text shadows, transitions and more.

    CSS3 Maker

    css3shadows43

    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

    css3shadows44

    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

    css3shadows45

    An amazing CSS3 generator with tons of customizable options, clean interface and simply great for those who want to start learning CSS.

    CSS3 Playground

    css3shadows46

    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)

    css3shadows47

    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)

    css3shadows48

    As the previous generator created by W3Schools, this tool lets you experiment with the text-shadow property in real-time.

    CarveMe

    css3shadows49

    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

    css3shadows50

    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

    css3shadows74

    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

    css3shadows51

    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

    css3shadows53

    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

    css3shadows54

    This plugin offers a method to display CSS3 shadows on IE through CSS Filter Blur and jQuery.

    CSS3 Text Shadows

    css3shadows55

    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

    css3shadows56

    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

    css3shadows57

    As part of understanding CSS3, this tutorial grabs the main features of it and strips them down.

    CSS3 Box Shadow and Inset Shadow

    css3shadows58

    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

    css3shadows59

    Useful examples that show the different things that you can do with CSS3 to create great shadow effects.

    CSS3 inner shadow

    css3shadows60

    Quick tip that explains how to easily create inner shadow effects with CSS3.

    Compass Box Shadow

    css3shadows61

    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

    css3shadows62

    Short post that indicates the benefits of CSS3 shadows as well as the way to use them.

    Quick Tips for CSS3 Box Shadow

    css3shadows63

    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

    css3shadows64

    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

    css3shadows65

    An effective solution for CSS3 shadows on Internet Explorer thanks to our friend Christian ”Schepp” Schaefer.

    CSS3 Box Shadow

    css3shadows66

    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

    css3shadows67

    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

    css3shadows68

    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

    css3shadows75

    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

    css3shadows79

    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

    css3shadows84

    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

    css3shadows88

    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

    css3shadows89

    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

    css3shadows94

    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?

    css3shadows95

    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

    css3shadows96

    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

    css3shadows69

    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

    css3shadows70

    The W3C take on CSS text shadows in several styles, including fuzzy shadows, glossy and multiple shadows.

    The ‘Box-shadow’ property

    css3shadows77

    The official W3C documentation of CSS3 box-shadows, includes different examples, complete documentation and more.

    Web Design with CSS3 Text Shadows

    css3shadows71

    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?

    css3shadows72

    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

    css3shadows73

    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

    css3shadows76

    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

    css3shadows80

    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

    css3shadows86

    Another Portuguese article, this one explains CSS3 shadows in many aspects, including browser compatibility, syntax and more.

    Sombras: la propiedad text-shadow

    css3shadows87

    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

    css3shadows93

    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

    css3shadows97

    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.



    Related Deals


    Related Posts