Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a 3D Text Effect using HTML and CSS
In web design, 3D text effects add depth and visual appeal to content. The text-shadow property is the primary CSS tool for creating these effects by applying multiple shadows with different offsets and colors to simulate depth.
Syntax
text-shadow: h-offset v-offset blur-radius color;
To create a 3D effect, we apply multiple text-shadow values separated by commas, each with different offset positions to build up layers of depth.
Example 1: Simple 3D Text with Hover Effect
The following example creates a basic 3D text effect that appears on hover
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #D1F2EB;
margin: 0;
padding: 50px;
}
h1 {
text-align: center;
color: #17202A;
font-size: 60px;
font-family: Arial, sans-serif;
transition: text-shadow 0.3s ease;
cursor: pointer;
}
h1:hover {
text-shadow:
0 1px 0 #17202A,
0 2px 0 #17202A,
0 3px 0 #17202A,
0 4px 0 #17202A,
0 5px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
</body>
</html>
Text appears flat initially. When you hover over "TutorialsPoint", it gains a 3D depth effect with stacked shadows creating the illusion of raised text.
Example 2: 3D Perspective Text
This example uses CSS transforms to create a 3D perspective effect
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #2C3E50;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.text-3d {
font-size: 80px;
font-family: Arial, sans-serif;
color: #E74C3C;
text-shadow:
0 0 0 #E74C3C,
1px 1px 0 #C0392B,
2px 2px 0 #A93226,
3px 3px 0 #922B21,
4px 4px 0 #7B241C,
5px 5px 10px rgba(0,0,0,0.6);
transform: perspective(300px) rotateX(10deg);
}
</style>
</head>
<body>
<div class="text-3d">3D TEXT</div>
</body>
</html>
Red "3D TEXT" appears with depth shadows and a slight perspective tilt, creating a strong 3D effect against a dark background.
Example 3: Animated Glowing 3D Text
This example combines 3D effects with color-changing animations
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.glow-text {
font-size: 60px;
font-family: Arial, sans-serif;
color: #fff;
text-transform: uppercase;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #00FFFF,
0 0 20px #00FFFF,
1px 1px 0 #333,
2px 2px 0 #333,
3px 3px 0 #333;
}
to {
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #FF00FF,
0 0 40px #FF00FF,
1px 1px 0 #333,
2px 2px 0 #333,
3px 3px 0 #333;
}
}
</style>
</head>
<body>
<div class="glow-text">NEON 3D</div>
</body>
</html>
White "NEON 3D" text appears with depth shadows and a glowing effect that animates between cyan and magenta colors, creating a neon-like appearance.
Key Properties
| Property | Purpose | Example Value |
|---|---|---|
text-shadow |
Creates shadow layers for depth | 1px 1px 0 #333 |
transform |
Adds perspective and rotation | perspective(300px) rotateX(10deg) |
transition |
Smooth animation effects | text-shadow 0.3s ease |
Conclusion
3D text effects are achieved by combining multiple text-shadow properties with different offsets and colors. Adding CSS transforms and animations can enhance the effect further for more dynamic and engaging text presentations.
2K+ Views
