How to create Skewed Background with hover effect using HTML and CSS?

Create a 3D Text Effect using HTML and CSS

Last Updated : 29 Jul, 2024

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 easiest methods to create text in a 3D look with HTML and CSS.

3D-Text-Effect

Approach

Create an HTML file and include a <h1> tag with your desired text.
Style the text by setting the background color, centering the text, and adjusting its size and font-family.
Apply a hover effect using the ‘:hover’ pseudo-class on the ‘<h1>’ tag.
Customize the text-shadow properties within the hover effect to achieve the desired 3D effect.
Include a transition property on the ‘<h1>’ tag to create a smooth animation when the hover effect is triggered. Adjust the duration for the desired timing.

Example: Create a 3D Text Effect using HTML and CSS.

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 {
            position: relative;
            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

How to create Skewed Background with hover effect using HTML and CSS?

S

sirohimukul1999

Improve

Article Tags :

Similar Reads

Create a Gradient Text Effect using HTML and CSS

This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background. HTML Section: Th

How to create text-reveal effect using HTML and CSS ?

Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of

How to Create a Cutout Text using HTML and CSS ?

Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an elementâ€™s background with the elementâ€™s parent. The CSS mix

How to create a Spotlight Effect using HTML and CSS ?

In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect. HTML Section: In this section, we will create a container elements for the background image an

How To Create Carved Text Effect using CSS?

The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro

How to Create Jumping Text 3D Animation Effect using CSS ?

In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. [GFGTABS] html <!DOCTYPE html>

How to Create Engraved Text Effect using HTML and CSS ?

The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te

Create a Reverse Scrolling Effect using HTML and CSS

Creating an attractive UI with a reverse scroll effect can be an engaging design. The Reverse Scrolling effect facilitates a unique and visually interactive experience for users, which breaks the conventional top-down scrolling system to which the user is accustomed. In this article, we'll create a

How to create reflection effect using HTML and CSS ?

The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t

How to create Neumorphism Effect using HTML and CSS ?

Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism. It is used to add a dark shadow to one side and a light