Open In App
Related Articles

How To Create Carved Text Effect using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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: 
 


 



Last Updated : 11 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads