How to create multilayered text effect using HTML and CSS?

Last Updated : 03 Aug, 2020

Multilayered 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 Multilayered Text Effect. Today we will be looking at one of the simplest and easy methods to create Multiple Layers of Text effect.
Approach: To achieve this Text effect, we will be using the text-shadow property. The same approach is also used to Create a 3D Text Effect using HTML and CSS. As mentioned in the article, the beauty of the CSS text-shadow property is that this property can be applied multiple times to the same HTML DOM element with a different thickness, color, and angle to achieve either the 3D look or the Multilayered Text Effect.

A similar approach has also been covered in the Double Layered Text Effect using CSS. In this tutorial, we will implement the Multilayered Text Effect for a website using HTML and CSS only. We assume that you are familiar with HTML and CSS Rules and have a basic knowledge of CSS text-shadow property.

Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site, CSS Animation, and to load the respective JavaScript files. We will install Browsersync globally.

npm install -g browser-sync

Step 2: Create an index.html file and an index.css file in your project root folder.
index.html: Add the following Snippet in that file:

html

<head> 
    <title>GeeksForGeeks</title> 
    <link rel="stylesheet" href="index.css"> 
</head> 
<body> 
    <title>GeeksForGeeks</title> 
    <h3>Multilayered Text Effect using CSS</h3> 
    <div>Hello Geeks</div> 
</body>

Step 3: Using CSS, we have aligned the div element to the Centre of the screen and provided some initial background styling. As mentioned above, we have simply used the text-shadow property of CSS to apply the multilayered text effect as explained above. We have made every layer of the text effect in a distinguishable color so that it is visible. We can simply add the CSS hover property to activate this text effect while hovering over the HTML div tag.
index.css:

CSS

div { 
    font-size: 12rem; 
    text-align: center; 
    height: 90vh; 
    line-height: 90vh; 
    color: green; 
    background: white; 
    font-family: "Times New Roman", Times, serif; 
    font-weight: 700; 
    text-shadow: 5px 5px 0px #eb452b,  
                 10px 10px 0px #efa032,  
                 15px 15px 0px #46b59b,  
                 20px 20px 0px #017e7f,  
                 25px 25px 0px #052939,  
                 30px 30px 0px blue,  
                 35px 35px 0px violet,  
                 40px 40px 0px black; 
} 

Step 4: To launch the application using Browsersync, run the following command in the project directory:

browser-sync start --server --files "*"

Output: This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.