DEV Community

Cover image for Amazing Pure HTML and CSS background animations
Babi-B
Babi-B

Posted on

Amazing Pure HTML and CSS background animations

Animations are a pretty cool thing, aren't they? They add something extra our websites and make them standout in the crowd! However, coming up the ideas could be quite daunting sometimes and just because you decide to code in html and css (only) does not mean you don't get to spice up your web pages. Here are some amazing ideas to get you started

Diagonal Color Gradients

Created by Alison Quaglia

It's simple,subtle, easy to code and could create a cool hover effect

Sliding Diagonals Background Effect

Created by Chris Smith

Now unlike the previous example which was subtle, this one is aimed at grabbing your attention

CSS only animated background

Created by Nour Ibram

Gives the party feeling to an otherwise plain background, doesn't it?

October falling leaves

Created by Casthra Demosthene

Pattern Animation (Infinite)

Created by Adam Abundis

Thank you @keyframes for the infinite scroll๐Ÿ˜

Awesome Animated background

Created by Beshoy Ekram

Could you just take a moment to appreciate how attractive the animation is?. The color mixture very pleasant and appealing yet does not take attention away from title in the front end.

Animated forest background

Created by Carpe numidium

Floating cubes

Created by Mohammad Abdul Mohaiman

I used this animation in my technical documentation page. Yup it's dope!๐Ÿ˜€

Sรฉpion CSS background animation 2

Created by Sรฉpion

Sublte๐Ÿ˜

Floating Cloud Background

Created by Shaw

I know I said pure CSS but when I saw this CSS(Less) animation, I figured you'll like it too๐Ÿ˜

I do hope these ideas serve as a kick. Feel free to play around with these CodePens and make them your own! This is also just a small sample of ideas; the web is a treasure trove of infinite possibilities.

Happy coding! ๐Ÿ˜Š

                                                 ๐Ÿ’ž Babi
Enter fullscreen mode Exit fullscreen mode

Discussion (28)

Collapse
amisha64 profile image
Amisha Kirti

Stunning.

Collapse
babib profile image
Babi-B Author

๐Ÿ˜‚ I'm glad you found it useful

Collapse
sojasmine profile image
Sojasmine Gjerstad

Amazing, love it๐Ÿฅฐ.

Collapse
babib profile image
Babi-B Author

๐Ÿ˜Š

Collapse
marinaandthecode profile image
Marina

Cool, thanks for sharing ๐Ÿ˜Š

Collapse
babib profile image
Babi-B Author

You're welcome ๐Ÿ™‚

Collapse
blessingmba profile image
Blessing Mba

Nice. I love this site

Collapse
babib profile image
Babi-B Author • Edited on

Yeah it's awesome!

Collapse
theme5sdotcom profile image
Theme5s.com

thanks :)

Collapse
babib profile image
Babi-B Author

You're welcome ๐Ÿ˜Š

Collapse
nove1398 profile image
nove1398

Nice!

Collapse
babib profile image
Babi-B Author

Thanks

Collapse
yayamamoudou profile image
yaya-mamoudou

Impressive how we can create cool animations without Javascript

Collapse
babib profile image
Babi-B Author

I know right!๐Ÿ˜ƒ

Collapse
cyph3r57 profile image
cyph3r57

Fantastic๐Ÿคฉ๐Ÿคฉ

Collapse
babib profile image
Babi-B Author

๐Ÿ˜Š

Collapse
dragon profile image
D7460N

Thank you very much for sharing!

Collapse
babib profile image
Babi-B Author

You're welcome

Collapse
ammekky profile image
ammekky

that was awesome!!

Collapse
babib profile image
Babi-B Author

Thanks ๐Ÿ˜Š

Collapse
geniuswebhub profile image
Geniusweb-hub

This is really awesome

Collapse
babib profile image
Babi-B Author

๐Ÿ˜Š

Collapse
babib profile image
Babi-B Author

You're welcome ๐Ÿ˜Š

Collapse
arnaudnjita profile image
Njita Arnaud

Amazing ๐Ÿคฉ

Collapse
babib profile image
Babi-B Author

I know right! ๐Ÿ˜Š

Collapse
kinko7 profile image
Carlos Marleta

excellent!!