How to make 3D text with CSS

Question

How to make 3D text with CSS

Is there any way to get this result with CSS only?

Do a type of 3D effect on panes text with CSS? Like the picture below?

body {
    background-color: #880000;
}

h1 {
    color: #fff;
    font-size: 100px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px black;
}

<h1>3D Text</h1>

4

css css3 3d

Author: João Pedro Schmitz, 2018-10-04

Source

2 answers

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 above case, I created several layers of text-shadow, until I get to 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).

4

Author: Jonathan de Toni, 2018-10-04 19:06:19

score 7 · Accepted Answer

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

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

Each shadow is specified as an offset of the text, along with with optional values of color and blur radius.

Before we see an example I will warning that without a doubt the most annoying of all is to combine the colors to apply a cool effect on the text, and it is interesting to always go editing to see the effect by the developer tools (famous inspect).

In the example below I put in a stronger hue, to better visualize the shadows applied, but if you want, just change the tones. The idea was to make it as similar 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 will try to explain better how it works. Before we hear 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 offset value of 1px and vertical of-1px, plus a blur radius of 0px (irrelevant) using color #2f5d87. Only with this we would 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 inperceptible and therefore would not give a 3D effect. what we did is apply a series of chained effects to h1. Here's 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 "the effect lines" and gets closer and closer to the desired effect.

References:

text-shadow-css - MDN