3

So I have this problem where i only want to animate the drop shadow to change the drop shadow and not the whole img.

img {
    filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    animation: animate 3s linear infinite;
}

@keyframes animate
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">

Improve this question
5
  • This could be useful. You could make the drop-shadow colour a variable and then animate the colour change by animating the change of the variable stackoverflow.com/questions/50661638/…
    – ConnerWithAnE
    Commented Feb 23, 2022 at 7:57
  • You need to apply multiple filters
    – Paulie_D
    Commented Feb 23, 2022 at 8:09
  • Theoretically we should have been able to apply the drop-shadow filter on a second element with enough offset to show only this drop-shadow and hide the original content in an overflow, allowing to show the "original" content untouched over it. However browsers refuse to draw the drop-shadow after a certain offset (not sure why, the weird thing is different browsers seem to agree when to stop working...). jsfiddle.net/ng9e703z Note that if your image doesn't have semit-transparency (so either fully opaque or fully transparent), this may still work, with an offset of 0)
    – Kaiido
    Commented Feb 23, 2022 at 8:57
  • 1
    Would a non-CSS solution (e.g canvas) be viable for you? (if so you may want to tag your question with [javascript]). Or even would a solution that would work only in latest Chromium based browsers be a viable solution? (This would be doable with the Paint API).
    – Kaiido
    Commented Feb 23, 2022 at 9:01
  • Note for myself in case I get an anwser and to file bug reports where needed: version that works in FF and Chrome: jsfiddle.net/r2c4qm68/1 and one that works in FF and Safari: jsfiddle.net/r2c4qm68/2
    – Kaiido
    Commented Feb 23, 2022 at 9:49

1 Answer 1

Reset to default
1

You could try animating changes of color of the drop shadow itself.

img {
    filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    animation: animate 3s linear infinite;
}

@keyframes animate
{
    0%
    {
        filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    }
    25%
    {
        filter: drop-shadow(0 0 10px rgb(0, 255, 0));
    }
    50% {
      filter: drop-shadow(0 0 10px rgb(0, 0, 255));
    }
    100%
    {
        filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    }
}
<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">

However, this does mean explicitly giving which colors you want it to transition to instead of just being able to rotate the color 360 degrees. (Using HSL instead of RGB doesn't solve this problem.)

Improve this answer
2
  • this won't change the colors of the image
    – Temani Afif
    Commented Feb 23, 2022 at 8:59
  • 1
    @TemaniAfif that's what is being asked
    – Kaiido
    Commented Feb 23, 2022 at 9:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.