CSS-Animation with two radial gradients moving/spinning inside the clipped mask png

Question

As you can see on the two provided images which come from a video, I want to create two spinning radial gradients inside a png. I already managed to use the mask property to create a pretty accurate radial-gradient inside the png, but I failed to create two radial gradients at different positions inside the png and making them move correctly.

.box {
  display:inline-block;
  width:300px;
  -webkit-mask:url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;  
 mask:url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  background: #9b59b6; /*Fallback if gradients don't work */
  background:radial-gradient(ellipse, rgba(255,255,255,1) 0%, rgba(197,251,255,1) 6%, rgba(64,188,255,1) 12%, rgba(4,15,51,1) 28%);
}

/* maintain the square ratio */
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}
/**/

<div class="box"></div>

This is the PNG I use to mask: pngtomask

How it should rotate and look:

rotationGradient1

rotationGradient2

I appreciate any kind of help! Thank you very much.

Pete · Answer 1 · 2023-01-20T11:25:43.410

3

Instead of using a mask, you could use background-clip: text and then transition your background position (you'll have to change your background so it matches what you want better):

.box {
  aspect-ratio: 1/1;          /* use this instead of psuedo element to make square */
  font-weight: bold;          /* you can change the font style as you please */
  font-size: 125px;
  color: blue;
  display: inline-flex;       /* used flex so we can centre the text */
  justify-content: center;
  align-items: center;
  width: 200px;
  background: #9b59b6;
  background: 
    radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 5%, rgba(64, 188, 255, 1) 20%, rgba(4, 15, 51, 0.5) 40%) -30px -30px,
    radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 5%, rgba(64, 188, 255, 1) 20%, rgba(4, 15, 51, 0.9) 40%) 40px 40px;
  text-fill-color: transparent;                 /* the following 2 styles and their webkit equivalents are to add the radial background to the text */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transition: background-position 1s ease; 
}

.box:hover {
  background-position: 65px -15px, 150px 40px;      /* this is for animating the background */
}

<div class="box">2.0</div>

edited Jan 20 '23 at 11:25

answered Jan 20 '23 at 10:55

Pete

57,112
28
117
166

Thank you for your help! That is a good idea. And how would I go if i wanted to add a second gradient in the same way on the box/text? – leon Jan 20 '23 at 11:01
you would probably need to change out your radial-gradient for a background image that had the small radial dark followed by the light radial and then another small radial and the you could start the position with the light on the 2 and then animate it so the background moves right and places the light on the 0 – Pete Jan 20 '23 at 11:05
hmm okay, but the issue is then the rotation will look pretty generic if its bound to one background-image. I need to move the two gradients inside the png separately from each other with different pace. – leon Jan 20 '23 at 11:20
I had a play around and you could use 2 radial gradients - see edited snippet but again the animation is limited to the same timing as you can only apply the transition to one property. If you want separate animations, you may have to wrap each bit of text in a span and then animate each span separately but then you wouldn't get the effect of the background moving across the numbers. I'm not sure if it is currently possible to do what you are after with css available today as you would need 2 backgrounds moving independently of each other using different timings – Pete Jan 20 '23 at 11:27
okay, i understand. thank you for your help still! im thinking to maybe stick with a same timing animation then – leon Jan 20 '23 at 11:34
If you want it to do a more loopy animation, you may want to change from a transition to a key frames animation, then you can plot more background positions in your animation rather than having it so linear with only going from a to b – Pete Jan 20 '23 at 11:36

Adam · Answer 2 · 2023-01-20T13:52:00.273

Maybe use background-position to push the gradient around using keyframes?

.box {
  display: inline-block;
  width: 300px;
  aspect-ratio: 1/1;
  -webkit-mask: url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  mask: url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  background: #9b59b6;
  /*Fallback if gradients don't work */
  background: radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 6%, rgba(64, 188, 255, 1) 12%, rgba(4, 15, 51, 1) 28%);
  animation: moveBackground 2s infinite;
  animation-timing-function: linear;
}

@keyframes moveBackground {
  0% {
    background-position: -50px -50px;
  }
  25% {
    background-position: 50px -50px;
  }
  50% {
    background-position: 50px 50px;
  }
  75% {
    background-position: -50px 50px;
  }
  100% {
    background-position: -50px -50px;
  }
}

<div class="box"></div>

CSS-Animation with two radial gradients moving/spinning inside the clipped mask png

2 Answers2

Linked