Create 3D text with HTML, CSS, and JavaScript

This morning I created a 3d text effect using text-shadows - you can view the codepen here. Let’s cover the basics of making this.

The HTML

When creating my experiment, I decided to make it easily scalable - I added an attribute to each element that I wanted to display the 3D effect. To make it more customizable, I decided to set the attribute to the color I wanted the 3D part of the text.

With this method, the HTML for a 3D element looks something like this:

<h1 move-shadow="blue">This text has a 3d effect</h1>

The CSS

This experiment didn’t require any CSS to make it work, since the effect is added via JavaScript. However, I did add some CSS to make it look nicer.

The JavaScript

The JavaScript for this experiment is fairly simple - I’ll walk you through the steps (this is a simplified version, you can view the full code on the codepen):

Find all the elements

To start off the code, we’ll select all the elements that have the move-shadow attribute:

const elements = document.querySelectorAll('[move-shadow]');

Next, let’s define a function to move the perspective. That way, we can update it when the mouse moves or on a different event.

const moveShadows = function(x,y){

   //constrain the motion based on the window size

   x /= window.innerWidth / 30;

   y /= window.innerHeight / 30;

   //center the shadow

   x -= 15;

   y -= 15;

   

   //maximum distance, used to draw the shadows

   const max = Math.max(Math.abs(x), Math.abs(y));



   //place the shadows 1 pixel apart

   for(let i = 0; i < max; i++){

      shadow.push(x*i/max + 'px ' + y*i/max + 'px color');

   }

   shadow = shadow.join(', ');



   //update all the shadows with the correct colors

   for(let i = 0; i < shadows.length; i++){

      shadows[i].style.textShadow =  shadow.replace(/color/g, shadows[i].getAttribute('move-shadow'));

   }

};

Last but not least, update the shadow by calling the moveShadow function:

moveShadows(Math.random() * window.innerWidth, Math.random() * window.innerHeight);