Cool CSS 3D Text Hover Effect | CSS Animation Effect

byCodingFlicks -October 02, 2020

0

Typography is an important element of web design in the modern era.. In addition to choosing the right font and size, visual appeal and readability are also very important. For this, using CSS text shadows can be a simple yet powerful way to enhance your text. In this blog post, we will provide a source code of a snippet called 3D Text Shadow Effect on Hover. Below is a video tutorial on how we can create this effect.

Video Tutorial:

We hope you have watched the video tutorial. Text shadows play an important role in adding depth, contrast, and a touch of elegance to the text on your website. We can see the effect of text shadows almost everywhere in modern web design. Some designers use text shadows in titles, while some of them use them in buttons, banners, or social media graphics. This technique helps to make the text stand out from other websites that use plain text. Text shadows enhance aesthetics and improve readability and user engagement. We see shadows in brand logos, call-to-action elements, hero sections and headlines, hover effects, interactive elements, etc.

In the HTML section, we have a simple <h2> tag that contains the word "Gorgeous". This serves as our primary text element. In the CSS section, the background is set to blue violet, which creates a vibrant, eye-catching backdrop for the text. The <h2> is centered and given a font size of 150px for impact. The text color is set to the same color as the background. At first glance, it appears invisible, but a trick has been used to make it pop. A white text stroke (outline) is also applied to the <h2> tag. When users hover over the text, a text shadow is formed, consisting of multiple layers.

You May Also Like:

CSS 3D Text Hover Effect [ Source Code ]:

To create this CSS text shadow effect on hover, we need to create an HTML file and a CSS file. Next, you need to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any issues. If the issue persists, you can download the code from the download button below the blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool CSS 3D Text Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Gorgeous</h2>
</body>
</html>

CSS

  body {
	margin: 0;
	padding: 0;
	background: blueviolet;
}
h2 {
	text-align: center;
	font-size: 150px;
	color: blueviolet;
	font-family: arial;
	font-weight: bold;
	transition: .5s;
	text-transform: uppercase;
	margin-top: 5%;
	-webkit-text-stroke: 1px #f1f1f1;
	padding-top: 14%;
}
h2:hover{
    text-shadow: -1px -1px 1px #ddd, 
        0px 1px 0 #ddd, 
        0px 2px 0 #ddd, 
        0px 3px 0 #ddd, 
        0px 4px 0 #ddd, 
        0px 5px 0 #ddd, 
        0px 6px 0 #ddd, 
        0px 7px 0 #ddd, 
        0px 8px 0 #ddd, 
        0px 9px 0 #ddd, 
        0px 10px 0 #ddd, 
        0px 11px 0 #ddd, 
        0px 12px 0 #ddd, 
        0px 13px 0 #ddd, 
        0px 14px 0 #ddd, 
        0px 15px 0 #ddd,				
        10px 25px 35px rgba(0, 0, 0, 0.9);
}

CSS text shadows may seem like a small effect for any website, but they have the power to completely transform the look and feel of your text element. We hope you enjoyed this simple CSS snippet. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.