How to 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. Today we will be looking at one of the simplest and easy methods to create our text in a 3D look.

1. 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: red;
            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>Welcome to Soltuts.com </h1>
</body>
</html>

2. Approach:

HTML Code: In this section, we have used a <h1> tag with the word to which we want to apply the 3D effect.

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.

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

CSS JavaScript PHP