Create 3D Text With CSS Shadow

Create 3D Text Effect with the CSS Text Shadow

HTML:

<h1 class="title">HELLO</h1>


CSS:

body{
    background: #e3e3e3;
}

.title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 150px;
    color: #f4f4f4;
    text-shadow: 1px 1px 1px #919191,
                 1px 2px 1px #919191,
                 1px 3px 1px #919191,
                 1px 4px 1px #919191,
                 1px 5px 1px #919191,
                 1px 6px 1px #919191,
                 1px 7px 1px #919191,
                 1px 8px 1px #919191,
                 1px 9px 1px #919191,
                 1px 10px 1px #919191,
                 1px 20px 40px rgba(0, 0, 0, 0.3);
}

2 thoughts on “Create 3D Text With CSS Shadow”

Leave a Comment