1. Basic Emboss:
.emboss {
color: #333;
text-shadow: 1px 1px 1px #fff;
}
Explanation: A simple shadow gives the illusion of the text being slightly raised. text-shadow is key here.
2. Deeper Emboss:
.deep-emboss {
color: #444;
text-shadow:
1px 1px 0px #fff,
2px 2px 0px #ddd,
3px 3px 0px #bbb;
}
Explanation: Multiple stacked shadows enhance the depth of the emboss effect.
3. Simple Extrusion:
.extrusion {
color: #fff;
text-shadow:
1px 1px #000,
2px 2px #000,
3px 3px #000,
4px 4px #000;
}
Explanation: Mimics text being pushed out from the background. Dark shadows create the illusion of depth.
4. Extrusion with Color:
.colored-extrusion {
color: #eee;
text-shadow:
1px 1px #888,
2px 2px #777,
3px 3px #666,
4px 4px #555;
}
Explanation: Uses varying darker shades of gray for the shadow to simulate a colored extrusion.
5. Light Source Extrusion:
.light-extrusion {
color: #fff;
text-shadow:
1px 1px #000,
2px 2px #000,
3px 3px #000,
4px 4px #000,
5px 5px #000;
}
Explanation: Creates a deep shadow effect to simulate the text being further away and illuminated from above.
6. Inset Text:
.inset {
color: #555;
text-shadow: -1px -1px 1px #fff;
}
Explanation: The negative text-shadow values give the effect of the text being pressed into the background (an inset or engraved look).
7. Multi-Layered Inset:
.deep-inset {
color: #666;
text-shadow:
-1px -1px 0 #fff,
-2px -2px 0 #ddd,
-3px -3px 0 #bbb;
}
Explanation: Stacking negative shadows intensifies the inset effect.
8. Neon Glow:
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #e60073,
0 0 40px #e60073;
}
Explanation: Multiple glows of increasing radius create a neon effect. Uses 0 0 for the shadow offset to center the glow. Colored shadows add to the effect.
9. 3D Letters (basic):
.letter3d {
position: relative;
color: #fff;
}
.letter3d:before {
content: attr(data-text);
position: absolute;
left: 2px;
top: 2px;
color: #000;
z-index: -1;
}
Explanation: This requires the HTML to include a data-text attribute with the text. The :before pseudo-element creates a slightly offset copy of the text in a darker color. Consider using more offset/copies for more apparent effect.
HTML (required for Example 9):
<span class="letter3d" data-text="3D Text">3D Text</span>
10. Improved 3D Letters:
.threedee {
position: relative;
font-size: 2em;
color: #fff;
}
.threedee:before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: black;
overflow: hidden;
width: 100%;
height: 100%;
z-index: -1;
clip: rect(auto, auto, 50%, auto);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
Explanation: Uses clip to create a faux 3D effect by only showing the top half of the duplicated text. The shadow adds realism. Requires the data-text attribute (see HTML for Example 9).
HTML (required for Example 10):
<span class="threedee" data-text="3D EFFECT">3D EFFECT</span>
11. Outline Text with 3D:
.outline-3d {
color: white;
-webkit-text-stroke: 1px black; /* Chrome, Safari */
text-stroke: 1px black; /* Standard syntax */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Explanation: Creates an outline around the text using text-stroke. text-shadow provides a raised effect. text-stroke requires vendor prefixes for some browsers.
12. Multiple Outlines:
.multiple-outline {
color: white;
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
text-shadow:
1px 1px 0 black,
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
2px 2px 4px rgba(0,0,0,0.5);
}
Explanation: Emphasizes the outline by adding multiple text-shadow copies that act like a thicker border.
13. Beveled Text:
.beveled {
color: #fff;
text-shadow:
1px 1px 1px #000,
-1px -1px 1px #333;
}
Explanation: Two shadows, one dark and one lighter, create a beveled or chiseled look.
14. Glossy Text:
.glossy {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
2px 2px 3px #000;
}
Explanation: A bright glow is combined with a subtle dark shadow to give the impression of a glossy surface.
15. Gradient Extrusion (Complex):
.gradient-extrusion {
color: #fff;
text-shadow:
1px 1px #000,
2px 2px #111,
3px 3px #222,
4px 4px #333,
5px 5px #444,
6px 6px #555,
7px 7px #666,
8px 8px #777;
}
Explanation: The changing shadow colors simulate a subtle dark-to-light gradient on the extruded surface. Requires a deep stack of shadows.
16. Wobble Text (with Animation):
.wobble {
color: #fff;
text-shadow: 2px 2px 4px #000; /* Initial Shadow */
animation: wobble-animation 2s infinite;
}
@keyframes wobble-animation {
0% { text-shadow: 2px 2px 4px #000; }
50% { text-shadow: -2px -2px 4px #000; }
100% { text-shadow: 2px 2px 4px #000; }
}
Explanation: Uses keyframes to create a slight “wobble” effect by changing the shadow direction.
17. Jumping Text (with Animation):
.jumping {
color: #fff;
text-shadow: 2px 2px 4px #000;
animation: jump-animation 1s infinite;
}
@keyframes jump-animation {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); text-shadow: 2px 5px 4px #000; } /* Raised Shadow */
100% { transform: translateY(0); }
}
Explanation: Uses transform: translateY() to create a jumping motion. The text-shadow changes slightly at the peak of the jump. animation is key.
18. Stacked Letters Basic (requires HTML):
.stacked {
position: relative;
color: #fff;
}
.stacked span {
position: absolute;
top: 1px;
left: 1px;
opacity: 0.5;
}
.stacked span:nth-child(2){ top: 2px; left: 2px;}
.stacked span:nth-child(3){ top: 3px; left: 3px;}
.stacked span:nth-child(4){ top: 4px; left: 4px;}
/* Add more spans as needed */
Explanation: This method requires wrapping each letter in a span. The spans are absolutely positioned and offset slightly to create a stacked effect. Limited practicality.
HTML (required for Example 18):
<div class="stacked"> <span>S</span><span>t</span><span>a</span><span>c</span><span>k</span><span>e</span><span>d</span> </div>
19. Glass Text simple:
.glass {
color: rgba(255, 255, 255, 0.8);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
Explanation: A semi-transparent text color with a dark shadow creates a simple glass-like effect.
20. Combining Techniques – Embossed Neon
.embossed-neon {
color: #dddddd;
text-shadow:
1px 1px 1px #444,
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #444;
}
Explanation: Combines the emboss effect using a light shadow with a neon glow. These examples offer a range of 3D text effects using CSS. Remember to experiment with different colors, shadow values, and animation techniques to achieve the desired look.
