This site uses third-party cookies, learn more or accept
dark light

Create 3D text with HTML, CSS, and JavaScript

Written by Max Pelic on

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:

1<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:

1const 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.

1const moveShadows = function(x,y){

2 //constrain the motion based on the window size
3
x /= window.innerWidth / 30;
4 y /= window.innerHeight / 30;
5 //center the shadow
6
x -= 15;
7 y -= 15;
8
9 //maximum distance, used to draw the shadows
10
const max = Math.max(Math.abs(x), Math.abs(y));
11
12 //place the shadows 1 pixel apart
13
for(let i = 0; i < max; i++){
14 shadow.push(x*i/max + 'px ' + y*i/max + 'px color');
15 }
16 shadow = shadow.join(', ');
17
18 //update all the shadows with the correct colors
19
for(let i = 0; i < shadows.length; i++){
20 shadows[i].style.textShadow = shadow.replace(/color/g, shadows[i].getAttribute('move-shadow'));
21 }
22};

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

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

Share this article:

Previous Article: CSS powered digital clock

Next Article: HTML Text Animation Editor