A cross-browser CSS collection of box shadows. It's great for tables, homepages content, containers, navigation and other blocks for your website. ...

A cross-browser CSS collection of box shadows. It's great for tables, homepages content, containers, navigation and other blocks for your website. To use it simply include the stylesheet on your document's head and add the class to the block you want to use. Created by Github developer Andrej Sharapov.

Simple and elegant, this is a snippet for a pure CSS text-shadow created by Codepen user Agathaco. 

Simple and elegant, this is a snippet for a pure CSS text-shadow created by Codepen user Agathaco. 

Colorful text long shadow effect in CSS by Codepen user Kristen Spencer. 

Colorful text long shadow effect in CSS by Codepen user Kristen Spencer. 

Created by Codepen user Ashley Nolan, this pen experiments with some simple text effects you can create using text-shadow and hover transitions.

Created by Codepen user Ashley Nolan, this pen experiments with some simple text effects you can create using text-shadow and hover transitions.

A cool looking snippet by Codepen user Gerhard Bliedung that creates a lighting effect on the text, as well as a spinning motion to reflect positio...

A cool looking snippet by Codepen user Gerhard Bliedung that creates a lighting effect on the text, as well as a spinning motion to reflect position of the light source as the shadows get projected from different sides of the text.

A set of shadows purely crafted in CSS with the box-shadow property and RGBA parameters. They were created based on Google's Material Design living...

A set of shadows purely crafted in CSS with the box-shadow property and RGBA parameters. They were created based on Google's Material Design living style guide where 5 different z-depth levels are specified for Android OS cards.

A set of Material Design cards and buttons that feature shadows built with Less Hat which provides the buttons with the functionality of being rais...

A set of Material Design cards and buttons that feature shadows built with Less Hat which provides the buttons with the functionality of being raised and their shadows fade bigger as you tap and hold on them.

A code snippet that generates 8 stitched bordered boxes featuring different types of shadows each supporting full responsiveness, styled in pure CS...

A code snippet that generates 8 stitched bordered boxes featuring different types of shadows each supporting full responsiveness, styled in pure CSS individually.

A great tool for generating boxes shadows in pure CSS allowing you to customize its opacity, horizontal and vertical lengths, blur radius, and more.

A great tool for generating boxes shadows in pure CSS allowing you to customize its opacity, horizontal and vertical lengths, blur radius, and more.

A set of 8 different pure CSS shadow effects for boxes created by mere usage of CSS WebKit box shadow and transform properties.

A set of 8 different pure CSS shadow effects for boxes created by mere usage of CSS WebKit box shadow and transform properties.

An experiment that replicates Photoshop's inner shadow layer style by using CSS3 plus Sass (with Compass). It is also very easy to change the color...

An experiment that replicates Photoshop's inner shadow layer style by using CSS3 plus Sass (with Compass). It is also very easy to change the color of the design thanks to a $change-me variable that just requires us to enter the color we desire. Created by Andrew Boyd from CodePen.

A set of 16 different shadow effects using CSS and its box-shadow property. Designed to make your writing more efficient, you simply need to add th...

A set of 16 different shadow effects using CSS and its box-shadow property. Designed to make your writing more efficient, you simply need to add these preset lines of code into your project in order to apply the desired shadow, The set includes all sorts of options, so you are sure to find one that fits your needs.

A set of samples using CSS3's box-shadow property including several "curled page" effects and background shadows. Initially created by CodePen user...

A set of samples using CSS3's box-shadow property including several "curled page" effects and background shadows. Initially created by CodePen user Jonathan Fernandez Navarrete as a collection of elements to be used in the 320andup framework.

User pixleight from CSSDeck created this amazing set of shadow effects, designed to "raise" the corners of these boxes and provide some depth to th...

User pixleight from CSSDeck created this amazing set of shadow effects, designed to "raise" the corners of these boxes and provide some depth to them. There are five options to choose from with different shadow positions, Compatible with IE9 and above.

This JSFiddle project provides a small collection of text shadows applied to a set of attractive fonts, creating a compelling look. The shadows are...

This JSFiddle project provides a small collection of text shadows applied to a set of attractive fonts, creating a compelling look. The shadows are definitely not like the usual ones, including striped and rounded details. Keep something in mind, though: These shadows will only work with webkit browsers.

Here is a way to create a shadow effect that makes a set of boxes look as if they were curled around the corners, resulting in a sharp 3D effect. A...

Here is a way to create a shadow effect that makes a set of boxes look as if they were curled around the corners, resulting in a sharp 3D effect. Also, another shadow goes active on mouseover, highlighting the box. Created by JSFiddle user Chase Woodford.

This CSS technique makes use of multiple shadows of different intensities to create this 3D effect that provides a smooth and clean appearance. Def...

This CSS technique makes use of multiple shadows of different intensities to create this 3D effect that provides a smooth and clean appearance. Definitely useful to tiles or pieces of texts that require extra attention from the reader.

This tip shows how to obtain inset shadows in our texts using CSS3's text-shadow property, making them look as if they were cut out from the backgr...

This tip shows how to obtain inset shadows in our texts using CSS3's text-shadow property, making them look as if they were cut out from the background.

CSS3 offers many possibilities when it comes to modifying the appearance of our objects, one of them is applying shadows to our boxes. This JSFiddl...

CSS3 offers many possibilities when it comes to modifying the appearance of our objects, one of them is applying shadows to our boxes. This JSFiddle project has also managed to make those shadows responsive, that way we can display the effect in any type of device.

This effect features a simple box with shadows to the sides, making it look as if the edges were lifted from the background. It is a great way to p...

This effect features a simple box with shadows to the sides, making it look as if the edges were lifted from the background. It is a great way to provide some dimension to our elements while keeping the often appreciated simplicity they behold.

This is one hell of a trippy animation we found at JSFiddle. A huge text reads "groovy" while an (fittingly, groovy) animation displays a line of b...

This is one hell of a trippy animation we found at JSFiddle. A huge text reads "groovy" while an (fittingly, groovy) animation displays a line of bright, saturated colors bleeding out of each letter, creating a very eye-catching effect that's sure to grab some attention.

This 3D text uses multiple shadow effects in order to carry that style. Rishabh built upon Andrew Lee's original design, adding a little bit o...

This 3D text uses multiple shadow effects in order to carry that style. Rishabh built upon Andrew Lee's original design, adding a little bit of rotation and making the text content-editable without having to modify the code, just click on the box and you are all set!

This is a set with many different CSS shadow effects. First designed in Photoshop, then implemented with code, this proves the vast power of CSS3 f...

This is a set with many different CSS shadow effects. First designed in Photoshop, then implemented with code, this proves the vast power of CSS3 for element customizing. It is all based on the box-shadow property, so compatibility with the latest versions of all major browsers should not present any trouble.

This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and ...

This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and the title, with the latter receiving two shadow effects in order to give it its 3D look. Created by Duncan Midwinter.

A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to...

A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to give it dimension while the background has a more typical effect. When the button is clicked, animations provide a smooth "push" illusion.

Bender_ASS from CSSDeck shows how to created a stitched leather effect using CSS3. The leather texture is achie...

Bender_ASS from CSSDeck shows how to created a stitched leather effect using CSS3. The leather texture is achieved through an image, while the stitches are designed with pure CSS, making use of a dashed border technique along with a little shadow to accentuate it.

This is a pretty fast retro shadow you can apply to any text. It actually is the combination of two shadows, one matching the background color, whi...

This is a pretty fast retro shadow you can apply to any text. It actually is the combination of two shadows, one matching the background color, while the other one carries a softer tone of the same color. By the way, the font you are watching in the example is called Sansita One, just letting you know.

This cool effect allows us to create an embossed text by just applying shadow to our design. It combines two different shadows, one white, the othe...

This cool effect allows us to create an embossed text by just applying shadow to our design. It combines two different shadows, one white, the other black. It is recommended to match both text and background colors in order to achieve the correct result.

A nice fluffy cloud text effect created only with CSS3's text-shadow property. The text features a transparent color with four shadows that come to...

A nice fluffy cloud text effect created only with CSS3's text-shadow property. The text features a transparent color with four shadows that come together providing different blur radius and opacity. Keep in mind this effect will not be displayed in IE8 or lower.

This pack contains many colorful shadow effects that will surely be seen by your users. Double elements, multicolor shadows, shaky and many more ar...

This pack contains many colorful shadow effects that will surely be seen by your users. Double elements, multicolor shadows, shaky and many more are included in this project. Count it to Ade Arwans from CodePen for the posting of these elements.

A super cool effect that displays a long set of cylinders with shadows behind them. Once we scroll trough the page, voila! The shadows move in rela...

A super cool effect that displays a long set of cylinders with shadows behind them. Once we scroll trough the page, voila! The shadows move in relation to the holes' position and the light source, which is always static. This creates an impressive illusion of perspective. Created by Nico Prat.

A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movem...

A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movements control the shadow size, which can go all the way to the frame of the page. Up and down movement manages the vertical position of the shadow.

Matt Sullivan from CodePen provides us with this shadow effect that gives another dimension to the text, The shadow looks somehow twisted and skewe...

Matt Sullivan from CodePen provides us with this shadow effect that gives another dimension to the text, The shadow looks somehow twisted and skewed, which hints for a particular "light source" position.

Here we have a colorful and cartoonish text with a very (and I mean very) subtle shadow behind it created in pure CSS. Created by CodePen user ...

Here we have a colorful and cartoonish text with a very (and I mean very) subtle shadow behind it created in pure CSS. Created by CodePen user Os Vampireos.

An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides,...

An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides, accordions and more. It even includes advanced effects for the most skilled developers or those wanting to create truly impressive designs.

A stripped-down shadow effect made in CSS. It helps bring out the text and give it more importance while also making it fancier. A Jeremy Shim...

A stripped-down shadow effect made in CSS. It helps bring out the text and give it more importance while also making it fancier. A Jeremy Shimko design hosted at CodePen.

This useful CodePen project provides us with four types of impressive shadows for text:- Elegant: Subtle, yet compelling and stylish.- Deep: Gives ...

This useful CodePen project provides us with four types of impressive shadows for text:- Elegant: Subtle, yet compelling and stylish.- Deep: Gives a 3D effect to the text, totally bringing it out of the background.- Inset: Doing the opposite as the deep effect, making the text look as if it was engraved into the background.- Retro: A very simple approach that applies a thin shadow

Design your own boxes with shadow by using this tool. You can modify blur, spread, offset, color and position of the shadow, as well as getting a r...

Design your own boxes with shadow by using this tool. You can modify blur, spread, offset, color and position of the shadow, as well as getting a random box right away thanks to the "surprise me" button. Also, it is possible to grab the code as soon as the newly created box is finished.

This text features an interesting 3D effect and a very subtle shadow to separate it from the nice background we can find at the CodePen page. Every...

This text features an interesting 3D effect and a very subtle shadow to separate it from the nice background we can find at the CodePen page. Everything is done with some fairly simple CSS by Tommy McDonald.

Geoff Graham created a way to display 3D paper-like elements by applying shadows to them with the use of CSS. N...

Geoff Graham created a way to display 3D paper-like elements by applying shadows to them with the use of CSS. Normally, this kind of effects are seen with images, so this effect is quite an advantage over those since it uses code only, making it a lot lighter.

This cool effect creates shadow behind an element and reacts to it according to the mouse position. It will treat it as the source of light, meanin...

This cool effect creates shadow behind an element and reacts to it according to the mouse position. It will treat it as the source of light, meaning it will always be in the opposite direction in relation to the cursor. It was created by Gabor using CSS and JavaScript.

Through the use of this effect, we can create a slight shadow where two sections of the site collide to make them look as if they were glued togeth...

Through the use of this effect, we can create a slight shadow where two sections of the site collide to make them look as if they were glued together in place. It is a great tool for integration and also has a very attractive appearance. This project is hosted at CodePen and created by Ryan Swedal.

This inner shadow effects gives a good deal of dimensionality and presence to the text. Definitely useful for titles and situations where what's wr...

This inner shadow effects gives a good deal of dimensionality and presence to the text. Definitely useful for titles and situations where what's written requires special attention. It is created and modified with CSS3 and Sass. All credit goes to Andrew Boyd.

A powerful CSS3 generator that assists in the creation of custom-made elements. We can modify borders, shadows, opacity, apply color gradients and ...

A powerful CSS3 generator that assists in the creation of custom-made elements. We can modify borders, shadows, opacity, apply color gradients and more. After we finish with our design, we have the possibility to retrieve the code, which can be compatible with older browsers if we choose to generate it that way.

A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the b...

A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the background, with a shadow accentuating the illusion. Also, the letters gain a 3D appearance, which gives them more presence.

This cool effect reacts according to the mouse's movements, adjusting the shadow behind the box in the opposite side. Depending on how far the shad...

This cool effect reacts according to the mouse's movements, adjusting the shadow behind the box in the opposite side. Depending on how far the shadow is, a blur effect will be applied, the closer we position the mouse to the box, the more focused the shadow will be.

This tutorial will show us how to animate a set of boxes using a jQuery effect. These boxes come with additional tweaks, such as a reflection or sh...

This tutorial will show us how to animate a set of boxes using a jQuery effect. These boxes come with additional tweaks, such as a reflection or shadow below them. When we hover on an element, it will raise and come back down when we move away, as the effect reacts in relation to its distance with the pointer.