Open In App

How to Create Embossed Text Effect using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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


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.




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


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




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



Last Updated : 14 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads