And by rounded drop shadow we mean this effect:
All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects.
Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead:
- One less HTTP request (yes, seriously:)
- CSS3 shadows scale nicer in responsive layouts and definitely look better on high density screens. In short – using CSS3 is better for responsive design!
- PNG images, which are used for rounded shadows, are exported without blending modes. So, if your shadow looked all wonderful on multiply layer, it will look like a grey dirt splatter on any background, other than white, when exported as .PNG
- Because you can!
Rounded drop shadow effect can be made with CSS3 in 2 ways:
- using drop-shadow property,
- using radial gradients.
In both cases we will be using CSS :after pseudo elements for the shadow. This way we avoid adding unnecessary HTML mark-up.
Example 1. Simple rounded drop shadow with box-shadow property.
First create the HTML element which will cast the shadow.
<div class="box css3-shadow"> <h4>Example 1</h4> Box-shadow css property is used to create the rounded drop shadow effect. Credit goes to <a href="http://www.paulund.co.uk/creating-different-css3-box-shadows-effects" target="_blank">Paulund.co.uk</a> for inspiration.</div>
As you see, the div has 2 classes: box and css3-shadow. Box class will be generic class for all the shadow-casting containers in our case, and the second class will have the :after element which’ll create the actual shadow.
CSS for the box class:
.box {
width:70%;
padding:20px;
background:#fff;
margin:20px auto 60px;
border-radius:2px;
}
.box h4{
background:#eee;
margin:0;
padding:60px 20px;
text-align:center;
-webkit-box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
}
CSS for the .css3-shadow class:
.css3-shadow{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Drop shadow effect with box-shadow
* ===============================================*/
.css3-shadow:after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
box-shadow:0 0 40px rgba(0,0,0,0.8);
bottom:0px;
left:10%;
right:10%;
width:80%;
height:50%;
-moz-border-radius:100%;
border-radius:100%;
}
In the DEMO Example 1 and Example 1 on darker background are created using this technique. Code is simple and straight forward. Couple of things are worth mentioning though:
- You can control shadow spread by setting the blur radius. See lines 13 and 14 of the code above. Now blur radius is 40px.
- You can control how wide the shadow spreads under parent container by setting width. See line 18 of the code above. Use % to keep things responsive. Don’t forget to update left and right position according to the new width.
RESPONSIVE! Try re-sizing the DEMO window and you will see how nicely the shadow scales together with it’s parent container.
Browser compatibility for box-shadow is quite good. Needless to say IE supports it as late as version 9. But, well, it’s IE… Older versions of Opera also used to give weirdest bugs for percent defined border-radius, but last versions are OK.
Shadows and glows created with CSS3 radial gradients.
If you worked with CSS3 radial gradients, you probably used all your swear vocabulary on them know that they are rather more difficult to grasp and manage, than the box-shadow property. They also do not have as good browser support as box-shadow. So the legitimate question is: why to even bother making shadows this way?
Well, first of all – for the sake of learning:).
Secondly, one may argue that you get a bit more control of spread, fuzziness, blur and shading with radial gradients (but I am not 100% sure:).
And last but not least – gradients are very handy when you want to create GLOWS rather than shadows. Say, you want to make a 3-color glow, like in Example 3 of the DEMO and throw in some crazy s**t additional glow specs. May be you even want to emulate a simplified PhotoShop Lens Flare effect. With CSS3 radial gradients you can! Because they are part of the background declaration. And, as we know, CSS3 gave us multiple backgrounds :).
Example 2. Simple rounded drop shadow with radial gradients.
Create the HTML element which will cast the shadow.
<div class="box css3-gradient1"> <h4>Example 2</h4> Radial gradient feature is used to create the rounded drop shadow effect.</div>
CSS for the .css3-gradient1 class:
.css3-gradient1{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Drop shadow effect with radial gradient
* ===============================================*/
.css3-gradient1:after{
content:"";
position:absolute;
z-index:-1;
top:100%;
bottom:0;
width:120%;
height:50px;
left:-10%;
right:-10%;
background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
}
In the DEMO Example 2 and Example 2 on darker background are created using this technique.
This effect is also fairly straight forward: we used a radial gradient background with 2 color stops, 50% opacity black and 0% opacity grey. Vertical shadow spread can be controlled with height property (see line 16 of the code above). Horizontal spread can be controlled via width (line 15).
Example 3. Complex glows with radial gradients.
Create the HTML element which will cast the shadow.
<div class="box css3-gradient2">
<h4>Example 3</h4>
<p>Radial gradient feature is used to create the glow effect. Weird stuff.</p>
</div>
CSS for the .css3-gradient2 class:
.css3-gradient2{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Glow effect with box-shadow
* ===============================================*/
.css3-gradient2:after{
content:"";
position:absolute;
z-index:-1;
top:100%;
bottom:0;
width:120%;
height:90px;
left:-10%;
right:-10%;
background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(96, 251, 202, 0.8), rgba(112, 220, 255, 0.5), rgba(255, 116, 225, 0.0) 50%), -webkit-radial-gradient(80% 10%, circle contain, rgba(96, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 180%), -webkit-radial-gradient(90% 20%, circle contain, rgba(255, 255, 202, 0.8), rgba(255, 255, 255, 0.0) 60%);
background:radial-gradient(ellipse at 50% -3%, rgba(96, 251, 202, 0.8), rgba(112, 220, 255, 0.5), rgba(255, 116, 225, 0.0) 50%), radial-gradient(circle at 80% 10%, rgba(96, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 2%), radial-gradient(circle at 90% 20%, rgba(255, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 1%);
}
In the DEMO Example 3 is created using this technique.
Just like in Example 2, vertical glow spread can be controlled with height property (see line 16 of the code above). Horizontal spread can be controlled via width (line 15).
Parameters of glow gradients are set on lines 19 & 20. As you can see, 3 gradient backgrounds are used to create main glow and 2 more sheens. But of course, just one gradient can be used as well.
Although radial gradients first may seem rather difficult to work with, once you get the picture it all becomes quite easy to manipulate. To dive into the radial gradients, you can read those tutorials:
CSS3 radial gradients
radial-gradient
CSS: Radial gradients syntax
And here is a Radial Gradients Generator
Support of rounded drop shadows in older browsers
What about support in the older browsers, especially IE? Of course, an image fall back can be used. But my take on that is – no need to bother. Rounded drop shadows are never an essential part of user experience. They are more of a pretty enhancement. So in my opinion, there’s not need to create an image fall back for browsers which don’t support radial gradients and box-shadow. In case when the rounded shadow is essential for the visual page organization as separator between content parts, a simple border can be used instead of it for older browsers.