Create a 3D Text Effect using HTML and CSS Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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. ApproachCreate 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 Comment More infoAdvertise with us Next Article Create a 3D Text Effect using HTML and CSS S sirohimukul1999 Follow Improve Article Tags : Web Technologies Web Templates 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 3 min read 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 3 min read 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 2 min read 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 2 min read 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. html <!DOCTYPE html> <html 4 min read Like