How to Create Engraved Text Effect using HTML and CSS ?

Last Updated : 08 Jun, 2020

The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive.

Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS text-shadow property we will generate the desired effect.

Example 1:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Engraved Text Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: serif;
            justify-content: center;
            align-items: center;
            display: flex;
            background-color: #65E73C;
        }

        div {
            content: '';
            font-size: 3em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: transparent;
            background: #008000;
            -webkit-background-clip: text;
            text-shadow: 2px 5px 5px 
                rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body>
    <div>
        <h2>GeeksforGeeks</h2>
    </div>
</body>

</html>

In the above example, we first create a div tag that contains some text inside of it, then we design text using CSS basic properties. Then we will use the text-shadow property to generate the engraved effect.

Output:

Example 2: