How to do 3D Text with CSS

The secret to making 3D text is in the text-shadow property of CSS. See the concept of ownership:

  

The text-shadow property adds shadows to the text. She accepts a   comma-separated list of shadows that will be applied to the text and   to element text-decorations.

     

Each shadow is specified as a scrolling text together   with optional color values and blur radius.

Before we look at an example I'll tell you that the most annoying thing of all is to combine colors to apply a nice effect to the text, and it's interesting to always edit to see the effect by the developer tools (famous to inspect).

In the example below I put in a stronger tonality, to better visualize the shadows applied, but if you want, just change the tones. The idea was to leave as close as possible to your image (at least the style).

body {
    background-color: #880000;
}

h1 {
    color: #fff;
    font-size: 150px;
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    text-shadow:  
      1px -1px 0 #2f5d87, 
      2px -2px 0 #2e5a83, 
      3px -3px 0 #2d5880, 
      4px -4px 0 #2b557c, 
      5px -5px 0 #2a5378, 
      6px -6px 0 #295074, 
      7px -7px 0 #274d71, 
      8px -8px 0 #264b6d, 
      9px -9px 0 #254869, 
      10px -10px 0 #234665, 
      11px -11px 0 #224361, 
      12px -12px 0 #21405e, 
      13px -13px 12px rgba(0, 0, 0, 0.55), 
      13px -13px 1px rgba(0, 0, 0, 0.5);
}

<h1>3D Text</h1>

The text-shadow of the previous example is, say, a bit complicated. But I'll try to better explain how it works. Before we count we need to know what each value means:

/* deslocamento-x | deslocamento-y | raio-de-desfoque | cor */
text-shadow: 1px -1px 0 #2f5d87;  

In the example we first pass a horizontal displacement value of 1px and vertical of -1px, in addition a blur radius of 0px (irrelevant) using color # 2f5d87. Only with this would we have the following result:

body {
  background-color: #880000;
}

h1 {
  color: #fff;
  font-size: 150px;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px -1px 0 #2f5d87;
}

<h1>3D Text</h1>

See that the value is almost unnoticeable and therefore would not give a 3D effect. What we've done is to apply a series of chained effects to h1 . See how it would look if you added two more "effects".

body {
  background-color: #880000;
}

h1 {
  color: #fff;
  font-size: 150px;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  text-shadow: 
      1px -1px 0 #2f5d87,
      2px -2px 0 #2e5a83, 
      3px -3px 0 #2d5880;
}

<h1>3D Text</h1>

See how it builds up "effect lines" and is getting closer and closer to the desired effect.

References:

• text-shadow - css - MDN

h1 {
  text-shadow: 0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
}

<h1>Teste</h1>

In the case above, I created several layers of text-shadow , until you get something close to what you expect.

Remembering that text-shadow is composed of 3 values (X-offset, Y-offset, amount of blur and shadow color).