DEV Community

Cover image for Amazing Pure HTML and CSS background animations
162 42

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (27)

Collapse
 
amisha64 profile image
Amisha Kirti β€’

Stunning.

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

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

Collapse
 
sojasmine profile image
Sojasmine Gjerstad β€’

Amazing, love itπŸ₯°.

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

😊

Collapse
 
blessingmba profile image
Blessing Mba β€’

Nice. I love this site

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’ β€’ Edited

Yeah it's awesome!

Collapse
 
theme5sdotcom profile image
Theme5s.com β€’

thanks :)

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

You're welcome 😊

Collapse
 
nove1398 profile image
nove1398 β€’

Nice!

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

Thanks

Collapse
 
yayamamoudou profile image
yaya-mamoudou β€’

Impressive how we can create cool animations without Javascript

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

I know right!πŸ˜ƒ

Collapse
 
shahid211 profile image
Shahid211 β€’

please add a tutorial video, how to add on website..

Collapse
 
cyph3r57 profile image
cyph3r57 β€’

Fantastic🀩🀩

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

😊

Collapse
 
d7460n profile image
D7460N β€’

Thank you very much for sharing!

Collapse
 
babib profile image
ππšπ›π’ ✨ β€’

You're welcome

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay