Beautiful background animation only with HTML and CSS

0 views - 1 minute readEdit this post

I rely on your support to keep this website running. If you find the content valuable, please consider making a small donation. whether it’s ₹25/$1 or ₹500/$5.

Donate

Secured by Stripe

Preview

Have you ever wondered how people create those beautiful background shapes that are animated? Well, it is much easier than you think let's have a look at what I am talking about,

Preview

You see these look so beautiful in websites, making them look more eye-catching. They are animated so it's so cool!! isn't it?

Let's create it then :)

Get started

First of all head over to this website

bgjar.com

You'll see something like this hover mouse over Animated shapes and then click on Customize

Animated Shapes -> Customize

Now simply customize it as you wish to and don't forget to tick the enable animations option :)

Once you are done click on get code at the bottom and copy the SVG code

Get SVG code

Coding Time :)

Once you copy the SVG code headover to your website code folder create a new file nameOfTheFile.svg you can name it whatever you want but don't forget to put .svg extension. Now in the same file paste the SVG code you copied!

Now head over to your main CSS file, In this file we'll set the background for the body.

main.css

background-image: url("/path/to/your/image.svg");
background-repeat: no-repeat;
background-size: cover;

And voila!! we're done!! enjoy some beautiful eye-catching animations in the body's background

Did you enjoyed the post?

Twitter (x)