Open In App

How to create multilayered text effect using HTML and CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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.
 



Last Updated : 03 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads