How to create a 3D text

We maybe all know how to create a text with shadow. It’s simple, use text-shadow property via CSS.

For example:

p {
  text-shadow: 4px 4px 1px #666;
}

The four values:

  1. value = The X-coordinate
  2. value = The Y-coordinate
  3. value = The blur radius
  4. value = The color of the shadow

The above codes adds the shadow to the p tag element, but not 3d effect.

We can create 3d text with multiple text shadows. How? See below:

See the Pen 3d Text by wpaesthetic (@wpaesthetic) on CodePen.18474

Leave a Reply