3d Text Design In Css

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.

Attention reader! Don't stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

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 ;

}

h 1 {

margin : 300px auto ;

text-align : center ;

color : white ;

font-size : 8em ;

transition: 0.5 s;

font-family : Arial , Helvetica , sans-serif ;

}

h 1: 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: