animated shadow effect with fluctuating shadow

Question

How to create continuous changing shadow of text that fluctuates automatically on users side like CSS effect that is animated text with continuous changing shadow width.

I know how to add CSS shadow but how to make it fluctuating?

#shadow {
  text-shadow: 4px 4px 4px #aaa;
}

<div id=shadow>shadow effect how to fluctuate it</div>

Answer 1

Not sure what exactly you mean by fluctuation here, but if you want to change the blur radius of your text-shadow, you can use animation here...

I am using @keyframes and animating the X Y and blur of your text-shadow. If you want, you can animate a particular axis or the blur radius only by changing the value 8px to something else.

#shadow {
  text-shadow: 4px 4px 4px #aaa;
  animation: animate-shadow 1s ease-in infinite;
}

@keyframes animate-shadow {
  50% {
    text-shadow: 8px 8px 8px #aaa;
  }
}

<div id=shadow>shadow effect how to fluctuate it</div>

Answer 2

Use key-frames and blur your text shadow

#shadow {
  text-shadow: 4px 4px 4px #aaa;
  animation: mymove 5s infinite;
}
@keyframes mymove {
  50% {text-shadow: 10px 20px 30px #aaa;}
}

<div id=shadow>shadow effect how to fluctuate it</div>