Rounded shadows with CSS3 and no images

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%;
}



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%);
}


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%);
}