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.

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I do and want me to continue doing the same, I'd like you consider leaving a tip. I'd highly appreciate that. Cheers!