How To Create Carved Text Effect using CSS? Last Updated : 11 Jun, 2021 Summarize Comments Improve Suggest changes Share Like Article Like 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: Comment More infoAdvertise with us Next Article How to create text-reveal effect using HTML and CSS ? S sirohimukul1999 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create a marquee effect using CSS ? In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti 2 min read How to create text-reveal effect using HTML and CSS ? Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of 3 min read How to Create Embossed Text Effect using CSS ? The embossed text effect creates a 3D illusion, making text appear raised or pressed into the page. Using CSS, this effect is achieved by applying contrasting text-shadow values that simulate light and shadow, giving the text a visually elevated or indented appearance.Approach:Basic HTML Structure: 2 min read How to Create Engraved Text Effect using HTML and CSS ? The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te 2 min read How to Create a Curve Text using CSS/Canvas ? Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG, 3 min read How to create reflection effect using HTML and CSS ? The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t 3 min read Like