CSS Text Shadow Animation on Mouse Move

This CSS code snippet helps you to create Text Shadow animation on mouse move event. When you move the mouse, the text dynamically generates colorful shadows, adding a visually appealing animated effect. This enhances the hero section’s text, making your webpage more engaging and interactive.

The JavaScript code calculates the mouse position, adjusts the shadows accordingly, and updates the text dynamically, creating a lively visual experience for users. Perfect for adding a touch of creativity to your web design.

How to Create CSS Text Shadow Animation On Mouse Move

1. In your HTML file, create the <div class="hero"> element containing the <h1> tag. This is the section where the animated text-shadow will be applied.

<div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>

2. The CSS code defines the styling for the hero section and the text. Feel free to customize the colors, fonts, and sizes to match your design preferences.

html {
    color:black;
    font-family: sans-serif;
  }
  .hero {
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    color:black;
  }
  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,1);
    font-size: 100px;
  }

3. The JavaScript code calculates the mouse position and adjusts the text-shadow dynamically. The shadow function is triggered on mouse movement, creating a visually appealing animation.

const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');
  const walk = 500; // 100px
  function shadow(e) {
    const { offsetWidth: width, offsetHeight: height } = hero;
    let { offsetX: x, offsetY: y } = e;
    if (this !== e.target) {
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / height * walk) - (walk / 2));
    text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;
  }
  hero.addEventListener('mousemove', shadow);

The walk variable in the JavaScript code controls the intensity of the text-shadow movement. Experiment with different values to achieve the desired effect.

That’s all! hopefully, you have successfully created a text Shadow Animation on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.