How To Create Carved Text Effect using CSS?
Last Updated :
11 Jun, 2021
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: