Open In App
Related Articles

Create a 3D Text Effect using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer, one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easiest methods to create our text in a 3D look.

Preview:

Screenshot-2024-01-08-174006

Approach:

  • Create an HTML file and include a <h1> tag with your desired text.
  • Style the text by setting the background color, centering the text, and adjusting its size and font-family.
  • Apply a hover effect using the ‘:hover’ pseudo-class on the ‘<h1>’ tag.
  • Customize the text-shadow properties within the hover effect to achieve the desired 3D effect.
  • Include a transition property on the ‘<h1>’ tag to create a smooth animation when the hover effect is triggered. Adjust the duration for the desired timing.

Example: In this example, we will see how to create a 3D Text Effect using HTML and CSS

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>3D Text Effect</title>
 
    <style>
        body {
            background: green;
        }
 
        h1 {
            margin: 300px auto;
            text-align: center;
            color: white;
            font-size: 8em;
            transition: 0.5s;
            font-family: Arial, Helvetica, sans-serif;
        }
 
        h1:hover {
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
                0 3px 0 #ccc, 0 4px 0 #ccc,
                0 5px 0 #ccc, 0 6px 0 #ccc,
                0 7px 0 #ccc, 0 8px 0 #ccc,
                0 9px 0 #ccc, 0 10px 0 #ccc,
                0 11px 0 #ccc, 0 12px 0 #ccc,
                0 20px 30px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
 
</html>

                    

Output: 


 



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads