DEV Community

Cover image for Beautiful background animation only with HTML and CSS
Preet Suthar
Preet Suthar

Posted on • Originally published at preetsuthar.me

Beautiful background animation only with HTML and CSS

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?

Demo here

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;


Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)