CSS Reflections

[Acorn]

Adding this CSS Code:

.reflect {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

and adding htmlclass="reflect" to your text, images or objects will add a fading reflection under your shape.

The reflection itself cannot be animated, only its parent.
I added an anime.js function to try that out.

The only downside is Firefox has not implemented this webkit feature.
In that case, you would need to clone, reflect and fade everything directly.

CSS - webkit-box-reflect.xar

Acorn

[gwpriester]

I am not seeing any reflections but the pink and green animated thingy at the bottom is awesome.

[Acorn]

I am not seeing any reflections but the pink and green animated thingy at the bottom is awesome.

gary, I've checked across my browsers and FF is the only fail.

In Website Body Code, you can change rotate: anime.stagger([-360, -180]), to any +/- values you like to get different effects. 360 is a full turn.

Acorn

[Egg Bramhill]

I can see the reflections in Chrome & Edge but as you state not in FF.