Create a 3D Text Effect using HTML and CSS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


CSS Code:

  • Step 1: The first thing that we have done is to align the <h1> element to center and provide the body bcakground.
  • 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Complete Code: Tn this section, we will be combining the above two sections to create a 3D text animation effect on mouse hover.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

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.