<!doctype html>
<html>
<head>
<title>3D Text Shadow Effect</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <h1>Coding Master</h1>
    </body>
</html>
 body
{
    background-color: #f9d56e;
    text-align: center;
}
h1
{
    font-size: 130pt;
    text-transform: uppercase;
    font-family: 'Luckiest Guy';
    color: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-shadow: 
        0 -6px 0 #212121,
        0 -6px 0 #212121,
        0 6px 0 #212121,
        0 6px 0 #212121,
       -6px 0 0 #212121,
        6px 0 0 #212121,
        -6px 0 0 #212121,
        6px 0 0 #212121,
        -6px -6px 0 #212121,
        6px -6px 0 #212121,
        -6px 6px 0 #212121,
        6px 6px 0 #212121,
        -6px 18px 0 #212121,
        0 18px 0 #212121,
        6px 18px 0 #212121,
        0 19px 1px rgba(0,0,0,.1),
        0 0 6px rgba(0,0,0,.1),
        0 6px 3px rgba(0,0,0,.3),
        0 12px 6px rgba(0,0,0,.2),
        0 18px 18px rgba(0,0,0,.25),
        0 24px 24px rgba(0,0,0,.2),
        0 36px 36px rgba(0,0,0,.15);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.