Animated CSS Background

With this tool you can quickly create and customize animated CSS backgrounds for your website. It includes a total of three different background generators.

Bokeh effect animation background

The first animated CSS background is taken from Louis Hoebregts Codepen. It consists of blurry bubbles of one or multiple colors moving in circular shapes. You can adjust the speed, the size and the colors of the bubbles that move around. Afterward you can easily copy the HTML and the CSS and insert it anywhere on your website. For each bubble a span is inserted into the dom. Each of them are then positioned randomly. Afterwards they are animated based on the speed variable defined by you.

Pure CSS animation background

The second one of the animated CSS backgrounds is inspired by Mohammad Abdul Mohaimans Codepen. This one has spinning rectangles that move up and turn into circles. Here you can adjust the count of the rectangles, the speed, the size and the color as well. In this case every rectangle is added as a list item to an unordered list. They are positioned randomly on the X-Axis and move up after different delays.

Rectangle animate background CSS

The last animated background generator is by Bjorns Codepen. It has cubes that are spinning and growing until they fade. You can adjust the count and the size as well as the color of the cubes. The cubes are positioned randomly on the screen and have different shades of the given background color. In the HTML they are also added as list items.