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 =
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 =
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
Please Login to comment...