Anurag Batra Anurag Batra - 1 month ago 8
CSS Question

animated shadow effect with fluctuating shadow

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 Source

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>