CSS blackhole using backdrop-filter blur

Published: 23 November 2020
on channel: Astrit

2,173

Demo: https://cdpn.io/KKMjZEz
Follow: / astritmalsija

-

I have created this CSS Only deep space/blackhole simulation with audio.

How this is done is by using multiple tags with different properties and animations and just stacked with CSS Grid place-items center and then one of the layers act like backdrop with backdrop-filter blur.

Be aware that this is 100% CSS and it renders quit heavy.
Tested on Chrome, Firefox and Safari latest version.

Also for better experience try turning on the audio.

#css #html #frontend #cssanimation #csstutorial #css3 #html #html5 #frontend #cssanimation #vercel #nextjs #nojavascript

On this page of the site you can watch the video online CSS blackhole using backdrop-filter blur with a duration of hours minute second in good quality, which was uploaded by the user Astrit 23 November 2020, share the link with friends and acquaintances, this video has already been watched 2,173 times on youtube and it was liked by 46 viewers. Enjoy your viewing!