Energy ball animation effect

In this tutorial I will show you how to create Energy Ball Animation effect using Elementor Pro. Here I will use few line of HTML and CSS code. Will not use any more extra plugin. So your site will be overloaded. This is a simple and fun effect. By creating this type of fun effect you can make your website to standout.

Copy this HTML Code

<div class="energy"> <span style="--clr:#fbad04; --i:18px; --d:2.5s"></span> <span style="--clr:#03a1d9; --i:13px; --d:5s"></span> <span style="--clr:#f7036d; --i:15px; --d:7.5s"></span> <span style="--clr:#93ff16; --i:20px; --d:10s"></span> </div>

Copy CSS Code

    --size: 300px;

selector .energy{
	position: relative;
	width: var(--size);
	height: var(--size);
selector .energy span{
	position: absolute;
	width: calc(var(--size) + var(--i));
	height: calc(var(--size) + var(--i));
	background: var(--clr);
	border-radius: 50%;
	transform-origin: calc(var(--to) + var(--i));
	animation: animate 5s linear infinite;
	animation-duration: calc(var(--d));
	mix-blend-mode: plus-lighter; /* add transparency */
	filter: blur(var(--blur)); /* add blur */

selector .energy span:nth-child(even){
    animation-direction: reverse;

@keyframes animate{
		transform: rotate(0deg);

		transform: rotate(360deg);


  1. Crie uma conta gratuita

    Your point of view caught my eye and was very interesting. Thanks. I have a question for you.

  2. 註冊binance

    Thanks for sharing. I read many of your blog posts, cool, your blog is very good.


Submit a Comment

Your email address will not be published. Required fields are marked *

Start Working with me for any wordpress project!