Create a 3D Text Effect using HTML and CSS - GeeksforGeeks

03 Aug, 2021
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 easy methods to create our text in a 3D look.Approach: The 3D text animation effect is designed by text-shadow property. The reason to apply multiple text-shadow is to give a 3D look as if we apply only single (or unitary) text-shadow it will be the same for all the alphabets present in the word. But for the 3D effect, we want a different thickness of shadow for each alphabet and at each angle(basically X and Y coordinates and radius of blur). Now let’s look at the implementation of the above approach.HTML Code: In this section, we have used a <h1> tag with the word to which we want to apply the 3D effect. 
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></head> <body>    <h1>GeeksforGeeks</h1></body> </html>
CSS Code:  
Step 1: The first thing that we have done is to align the <h1> element to center and provide the body background.
Step 2: Now, apply a transition to h1 element. Duration can be adjusted according to your need.
Step 3: Now apply text shadow on h1 element. The concept of applying multiple text-shadow has already been explained in the approach at the starting of the article.
Tip: We have to choose to apply an effect to be visible only on mouse hover but if you want the effect to be visible all the time then remove the hover selector. 
CSS
<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>
Complete Code: Tn this section, we will be combining the above two sections to create a 3D text animation effect on mouse hover. 
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:  
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sumitgumber28
CSS-Basics
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
Form validation using jQuery
How to apply style to parent if it has child with CSS?
How to auto-resize an image to fit a div container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)