Making 3D elements with CSS3 shadows

by secretgspot

HTML

<div>
    <h1>Some 3D text</h1>
</div>


<div>
    <h2>A 3D box with text on top.</h2>
</div>


<div>
    <h3>A 3D softened box with text on top.</h3>
</div>


<div class="fancy">
    <h4>A 3D box with lots of style.</h4>
</div>

<div>
    <h5>Stacked boxes.</h5>
    <h5>Stacked.</h5>
    <h5>Stacked boxes of different size.</h5>
    <h5>Stack 1.</h5>
    <h5>Stack 2.</h5>
    <h5>Stack three.</h5>
</div>

<div class="last"><a href="http://css3generator.com/">Generate your own effects.</a></div>

CSS

body { font: normal 14px/18px arial, sans-serif; background: #555; }

a { color: #777; }

div { margin: 40px; }

div h1 { 
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 0 1px 0 #CCCCCC, 
        0 2px 0 #C9C9C9, 
        0 3px 0 #BBBBBB, 
        0 4px 0 #B9B9B9, 
        0 5px 0 #AAAAAA, 
        0 6px 1px rgba(0, 0, 0, 0.1), 
        0 0 5px rgba(0, 0, 0, 0.1), 
        0 1px 3px rgba(0, 0, 0, 0.3), 
        0 3px 5px rgba(0, 0, 0, 0.2),
        0 5px 10px rgba(0, 0, 0, 0.25), 
        0 10px 10px rgba(0, 0, 0, 0.2), 
        0 20px 20px rgba(0, 0, 0, 0.15); 
}

div h2 {
    background: #fff;
    box-shadow: 1px 1px 0 #CCCCCC,
        2px 2px 0 #C9C9C9,
        3px 3px 0 #BBBBBB,
        4px 4px 0 #B9B9B9,
        5px 5px 0 #AAAAAA,
        3px 6px 1px rgba(0, 0, 0, 0.1),
        0 0 5px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.3),
        1px 3px 5px rgba(0, 0, 0, 0.2),
        2px 5px 10px rgba(0, 0, 0, 0.25),
        5px 10px 10px rgba(0, 0, 0, 0.2),
        10px 20px 20px rgba(0, 0, 0, 0.15); 
    color: #666;
    padding: 10px;
}

div h3 {
    background: #fff;
    box-shadow: 1px 1px 0 #CCCCCC,
        2px 2px 0 #C9C9C9,
        3px 3px 0 #BBBBBB,
        4px 4px 0 #B9B9B9,
        5px 5px 0 #AAAAAA,
        3px 6px 1px rgba(0, 0, 0, 0.1),
        0 0 5px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.3),
        1px 3px 5px rgba(0, 0, 0, 0.2),
        2px 5px 10px rgba(0, 0, 0, 0.25),
        5px 10px 10px rgba(0, 0, 0, 0.2),
        10px 20px 20px rgba(0, 0, 0, 0.15);
    border: 0;
    border-radius: 5px;
    color: #aaa;
    font-weight: bold;
    padding: 10px;
}

div.fancy {
    background: rgb(246,248,249); 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
   ...