Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Animated Space Background using plain CSS

Here’s a trippy animated space background that you can create using plain and old CSS. This is inspired by the Beyond the Gradient website.

First, see it in action.

See the Pen Animated Space Background by Amit Merchant (@amit_merchant) on CodePen.

And here’s all the css you would need to set this background.

body {
  background-color: #000000;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

As you can tell, the magic that powers this animation is the animated SVG we are using in the background-image property. And then we are using the background-size property to set the size of the SVG to 100% of the width and height of the element.

Next, we are using the background-position property to center the SVG inside the element. And finally, we are using the background-repeat property to repeat the SVG in both directions.

Also, since the SVG is transparent, we are using the background-color property to set the background color of the element.

Like this article? Consider leaving a


👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.