Open In App

How To Create Carved Text Effect using CSS?

Last Updated : 11 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the background or maybe of a different color. We will be looking at the same color type.
Approach: The approach is to first make text invisible by giving it the same color as of background and then give a thin shadow to text so that it becomes visible because of the border-shadow. 
HTML Code: In this section we have created two div and a text wrapped inside the nested div. You can also use h1 instead of the nested div tag.
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Embedded Text</title>
    <link href=
"https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@700&display=swap"
          rel="stylesheet">
</head>
<body>
   <div class="geeks">
       <div class="gfg">
           GeeksforGeeks
       </div>
   </div>
</body>
</html>


CSS Code: In CSS, first we have done some basic styling like aligning text to center and providing it a background and set google-font. Then as discussed in the approach, we have given our text the same color as of background. Now we have used a combination of black and white thin shadows to give an outline kind of effect around our text which makes our text visible now.
Tip: You can use any color for shadow and text but make sure to keep shadow as thin as possible.
 

CSS




<style>
    body {
        font-family: 'Baloo Chettan 2', cursive;
        background: green;
    }
 
    .geeks {
        position: absolute;
        top: 50%;
        left: 40%;
 
    }
 
    .gfg {
        position: relative;
        display: block;
        font-size: 80px;
        color: green;
        text-shadow: -1px 1px 1px
            rgba(0, 0, 0, .4), 1px -1px 0
            rgba(255, 255, 255, 1);
    }
</style>


Complete Code: It is the combination of the above two sections of code. 
 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Embedded Text</title>
 
    <link href=
"https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@700&display=swap"
    rel="stylesheet">
     
    <style>
        body {
            font-family: 'Baloo Chettan 2', cursive;
            background: green;
        }
 
        .geeks {
            position: absolute;
            top: 50%;
            left: 40%;
 
        }
 
        .gfg {
            position: relative;
            display: block;
            font-size: 80px;
            color: green;
            text-shadow: -1px 1px 1px
                rgba(0, 0, 0, .4), 1px -1px
                  0 rgba(255, 255, 255, 1);
        }
    </style>
 
</head>
 
<body>
    <div class="geeks">
        <div class="gfg">
            GeeksforGeeks
        </div>
    </div>
</body>
 
</html>


Output: 
 

 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads