Pulse effect css only animation like supercell logo

Hello Friends,

Please have a look at this 2 second video:

You’ll see their SUPERCELL logo with a quick glow behind.

I have tried to achieve something similar here:

But the “pulse” div will leave a little black hole in the effect, and I need it there to get the border-radius.

Any suggestions on how to fix this? Also is it a good idea like I have done to put the pulse in a seperate div?

If you sett a box-shadow inset to the same colour as the glow then you wont get the black dot.

I would also use the :after pseudo element instead of using an extra div. Also lose the webkit prefix as you want it for all browsers.

here’s a quick revamp to test.


Wow great, exactly what I was aiming for. Thank you!

1 Like

If you look at this codepen:

You could actually see a smal dot, whats wrong with this example?

Try changing the width and height down to 2px.

It works with zero but loses the roundness.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.