How to Create Embossed Text Effect using CSS ?

The embossed text effect can be easily generated using HTML and CSS. We will use the CSS text-shadow property to get the desired output.

HTML Code: In this section, we will create a basic structure of the body that holds text or heading.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Embossed Text Effect</title>
</head>
  
<body>
    <div>
        <h2>GeeksforGeeks</h2>
    </div>
</body>
  
</html>

chevron_right


CSS Code: In this section we will style the text. We will use the CSS text-shadow property to add shadow to the text and create the embossed effect.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Final Code: It is the combination of the above two code sections.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.