How to Create Embossed Text Effect using CSS ? Last Updated : 07 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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: Create a simple HTML structure with a <div> containing an <h2> element for the embossed text effect.Centered Positioning: Use position: absolute and transform: translate(-50%, -50%) to perfectly center the text on the page.Text Shadow for Depth: Apply a darker shadow using text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5) to simulate the deeper parts of the text.Highlighting Effect: Add a lighter shadow with 2px -2px 0 rgba(255, 255, 255, 0.9) to create a raised highlight effect.Font and Background: Use a serif font for the text and set a background color to contrast with the embossed text's visual style.Example: In this example we are following the above-explained approach. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Embossed Text Effect</title> <style> body { margin: 0; padding: 0; font-family: serif; justify-content: center; align-items: center; display: flex; background-color: #65E73C; } div { content: ''; font-size: 3em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } h2 { color: #65E73C; text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5), 2px -2px 0 rgba(255, 255, 255, 0.9); } </style> </head> <body> <div> <h2>GeeksforGeeks</h2> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Embossed Text Effect using CSS ? L lakshgoel204 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads 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 backgro 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 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 Apply Shadow Effect on Text Using CSS? The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta 1 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