20 examples of CSS for creating 3D text effects

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.