Skip to content
Related Articles

Related Articles

Improve Article

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:




<!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:




<!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: gray;
        }
  
        div {
            content: '';
            font-size: 3em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-70%, -90%);
            color: transparent;
            background: black;
            -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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :