How To Create Carved Text Effect using CSS?
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 = "Beginner" > < div class = "gfg" > w3wiki </ 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 ; } .Beginner { 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; } .Beginner { 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 = "Beginner" > < div class = "gfg" > w3wiki </ div > </ div > </ body > </ html > |
Output: