{"id":4690,"date":"2021-11-15T01:00:00","date_gmt":"2021-11-15T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/animated-backgrounds-css\/"},"modified":"2025-06-10T10:41:51","modified_gmt":"2025-06-10T08:41:51","slug":"animated-backgrounds-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/animated-backgrounds-css\/","title":{"rendered":"34 Animated Backgrounds Examples [With Pure CSS]"},"content":{"rendered":"\n<p>You can use a CSS background animation to help your site stand out from the crowd, emphasize your branding, or simply look awesome. And because CSS has gotten so powerful, you can create some great-looking <strong>CSS background effects without needing a single line of JavaScript<\/strong>. Now you can even <a href=\"https:\/\/alvarotrigo.com\/blog\/background-video-css\/\">create a video background just with CSS<\/a>!! Who would have told us that 15 years ago, huh?<\/p>\n\n\n\n<p>So, here are <strong>20 great animated backgrounds<\/strong> you can use in your projects, or draw inspiration from! Ideal for <a href=\"https:\/\/alvarotrigo.com\/blog\/hero-slider\/\">hero slider<\/a> websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1)-animated-background-colours-in-css\">1) Animated Background Colours in CSS<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Jjymbqb\" data-src=\"\/\/codepen.io\/anon\/embed\/Jjymbqb?height=450&amp;theme-id=1&amp;slug-hash=Jjymbqb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Jjymbqb\" title=\"CodePen Embed Jjymbqb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let&#8217;s start with the basics. A simple color fades &#8211; you can use <code>@keyframes<\/code> to fade the background between as many colors as you need and use the percentages to determine how long the animation will stay on that color before changing.<\/p>\n\n\n\n<p>Simple, easy to implement, and effective.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2)-css-animated-background-gradient\">2) CSS Animated Background Gradient<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyzgOER\" data-src=\"\/\/codepen.io\/anon\/embed\/dyzgOER?height=450&amp;theme-id=1&amp;slug-hash=dyzgOER&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyzgOER\" title=\"CodePen Embed dyzgOER\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now let&#8217;s take it up a notch &#8211; instead of a single color fading into another, you can add an extra touch of class with a gradient, pleasantly sweeping back and forth across the screen. This is one of the easiest ways to make a <strong>moving background in CSS<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3)-floating-squares\">3) Floating Squares<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRvYNax\" data-src=\"\/\/codepen.io\/anon\/embed\/GRvYNax?height=450&amp;theme-id=1&amp;slug-hash=GRvYNax&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRvYNax\" title=\"CodePen Embed GRvYNax\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Time to add some objects into the mix! Here&#8217;s a cool moving background (CSS only, believe it or not) by <a href=\"https:\/\/codepen.io\/tokyoweb\" target=\"_blank\" rel=\"noopener nofollow\">TokyoWeb<\/a>. These semi-transparent rotating squares float up the screen.<\/p>\n\n\n\n<p>This looks cool as-is, but the cool thing is, you can play around with the code to create different colors, shapes, directions, and speeds. Put your creative hat on and see what you come up with.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4)-svg-animation-(html-animated-background)\">4) SVG Animation (HTML Animated Background)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBMMyxz\" data-src=\"\/\/codepen.io\/anon\/embed\/qBMMyxz?height=450&amp;theme-id=1&amp;slug-hash=qBMMyxz&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBMMyxz\" title=\"CodePen Embed qBMMyxz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you are not familiar with SVG this animation will look like magic to you. There&#8217;s not a single line of CSS or JS. It&#8217;s done purely using HTML. A pure <strong>HTML animated background<\/strong>.<\/p>\n\n\n\n<p>This is one of the coolest HTML background animations I&#8217;ve ever seen. It gives me the same vibes as some old Mac OS X screensavers with those sophisticated gradients that never get old and gives a super modern look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5)-animated-moving-squares-background\">5) Animated Moving Squares Background<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzOOjWm\" data-src=\"\/\/codepen.io\/anon\/embed\/YzOOjWm?height=450&amp;theme-id=1&amp;slug-hash=YzOOjWm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzOOjWm\" title=\"CodePen Embed YzOOjWm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you are looking for a subtle yet modern animation, this animated background made of squares can be the ideal candidate for your page.<\/p>\n\n\n\n<p>This animation is purely made on CSS and the effect can easily be applied to almost any website because due to its nondistracting nature. You can apply this animated background to your whole website or specific sections of your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6)-basic-landscape-background-animation\">6) Basic Landscape Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWqqBXX\" data-src=\"\/\/codepen.io\/anon\/embed\/MWqqBXX?height=450&amp;theme-id=1&amp;slug-hash=MWqqBXX&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWqqBXX\" title=\"CodePen Embed MWqqBXX\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This example showcases one of the most basic background animations by animating the position of an image from left to right.<\/p>\n\n\n\n<p>However, when done with the right picture like in this example, it shows the potential that it can have for a landing page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7)-grid-background-animation\">7) Grid Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwYYBZP\" data-src=\"\/\/codepen.io\/anon\/embed\/RwYYBZP?height=450&amp;theme-id=1&amp;slug-hash=RwYYBZP&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwYYBZP\" title=\"CodePen Embed RwYYBZP\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This animation is not only made with pure CSS but also with cero HTML!<\/p>\n\n\n\n<p>It uses the CSS <code>keyframes<\/code> feature to animate the background position of a grid background. The effect has been applied to the <code>body<\/code> of the page and can be applied to any other element too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8)-animated-background-of-figures\">8) Animated Background of Figures<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOddjdL\" data-src=\"\/\/codepen.io\/anon\/embed\/gOddjdL?height=450&amp;theme-id=1&amp;slug-hash=gOddjdL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOddjdL\" title=\"CodePen Embed gOddjdL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This animation gives your site a trendy vibe. It animates some basic figures up and down with some easing effects giving your background a new touch.<\/p>\n\n\n\n<p>The figures are made out of base64 images and the background animation is done by using CSS <code>keyframes<\/code> and CSS transformations. All very basic stuff.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9)-text-background-animation\">9) Text Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poOOZYZ\" data-src=\"\/\/codepen.io\/anon\/embed\/poOOZYZ?height=450&amp;theme-id=1&amp;slug-hash=poOOZYZ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poOOZYZ\" title=\"CodePen Embed poOOZYZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Although it seems can be considered a <a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">text animation<\/a> at first glance, this animation is technically a background animation within a text element.<\/p>\n\n\n\n<p>It creates a very interesting effect and it can be quite a nice visual effect when choosing the right background and a thick font.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10)-blob-background-animation\">10) Blob Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNggKqz\" data-src=\"\/\/codepen.io\/anon\/embed\/WNggKqz?height=450&amp;theme-id=1&amp;slug-hash=WNggKqz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNggKqz\" title=\"CodePen Embed WNggKqz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Yes, it is possible to have a blob animation without using JavaScript, and here&#8217;s an example to prove it.<\/p>\n\n\n\n<p>Using the CSS <code>border-radius<\/code> property we can create a blob element then we can then rotate as usual by using the CSS <code>transform<\/code> property. Now you can add animated blobs to your websites!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"11)-circle-backgrounds\">11) Circle Backgrounds<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExeepqB\" data-src=\"\/\/codepen.io\/anon\/embed\/ExeepqB?height=450&amp;theme-id=1&amp;slug-hash=ExeepqB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExeepqB\" title=\"CodePen Embed ExeepqB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another subtle animation that you can add to your page to automatically give it a modern look without much effort.<\/p>\n\n\n\n<p>The animation is very basic but the effect it creates looks so cool! The effect is done by animating each individual circle with a different pulse effect using the CSS <code>keyframe<\/code> property.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"12)-particles-animation\">12) Particles Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxaaaGx\" data-src=\"\/\/codepen.io\/anon\/embed\/xxaaaGx?height=450&amp;theme-id=1&amp;slug-hash=xxaaaGx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxaaaGx\" title=\"CodePen Embed xxaaaGx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s another example that shows us how to animate glowing particles using CSS and HTML elements.<\/p>\n\n\n\n<p>You can apply this effect as a background although is not really a background animation per se.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"13)-scroll-background-animation\">13) Scroll Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKxxxdG\" data-src=\"\/\/codepen.io\/anon\/embed\/KKxxxdG?height=450&amp;theme-id=1&amp;slug-hash=KKxxxdG&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKxxxdG\" title=\"CodePen Embed KKxxxdG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another example of a super basic animation is that when used appropriately can give your site a totally new look.<\/p>\n\n\n\n<p>It uses a basic vertical animation using mimicking the scrolling of a blurred website in the background. It uses CSS <code>keyframes<\/code> and <code>transform<\/code> to perform the movement of the background image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14)-wave-background-animation\">14) Wave Background Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaOOOZx\" data-src=\"\/\/codepen.io\/anon\/embed\/BaOOOZx?height=450&amp;theme-id=1&amp;slug-hash=BaOOOZx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaOOOZx\" title=\"CodePen Embed BaOOOZx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Wave animations are actually a thing. In fact, waves were actually a thing even before having them animating in the background.<\/p>\n\n\n\n<p>Here is one of the <strong>best wave CSS animations<\/strong> you can use for your background. It uses multiple layers of waves and adds the parallax effect and opacity to give it a sense of depth.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"15)-fireworks-css-background-effects---version-1\">15) Fireworks CSS background effects &#8211; version 1<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvqYobY\" data-src=\"\/\/codepen.io\/anon\/embed\/wvqYobY?height=450&amp;theme-id=1&amp;slug-hash=wvqYobY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvqYobY\" title=\"CodePen Embed wvqYobY\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This pure CSS animated firework effect would look great by itself (could be cool on a &#8220;Congratulations&#8221; or &#8220;Success&#8221; page or something like that), but could look even cooler with a foreground image, maybe a cityscape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"16)-fireworks-css-background-effects---version-2\">16) Fireworks CSS background effects &#8211; version 2<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_porxNmX\" data-src=\"\/\/codepen.io\/anon\/embed\/porxNmX?height=450&amp;theme-id=1&amp;slug-hash=porxNmX&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed porxNmX\" title=\"CodePen Embed porxNmX\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s another approach you could take to fireworks &#8211; this version has a different feel &#8211; the particles have a more natural movement, almost as if there&#8217;s a gravity to them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"17)-seeding-css-background-effect\">17) Seeding CSS background effect<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWvPbMW\" data-src=\"\/\/codepen.io\/anon\/embed\/MWvPbMW?height=450&amp;theme-id=1&amp;slug-hash=MWvPbMW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWvPbMW\" title=\"CodePen Embed MWvPbMW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This moving background (using only CSS) feels a bit like moving through a ball pool at warp speed. I like it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"18)-blurred-lines\">18) Blurred Lines<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEJqBdY\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEJqBdY?height=450&amp;theme-id=1&amp;slug-hash=ZEJqBdY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEJqBdY\" title=\"CodePen Embed ZEJqBdY\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If Robin Thicke made CSS background effects, this might be the sort of thing he came up with. This one is eye-catching without being distracting &#8211; notice that even with this quite light typeface, the text is still easy to read.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"19)-retro-grid-animated-css-background\">19) Retro Grid Animated CSS background<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abyRBgm\" data-src=\"\/\/codepen.io\/anon\/embed\/abyRBgm?height=450&amp;theme-id=1&amp;slug-hash=abyRBgm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abyRBgm\" title=\"CodePen Embed abyRBgm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Are you a fan of the 80s retro look? Are you building a site for a synthwave artist? Or can you simply not let go of the past? If the answer to any of these questions is &#8220;Yes&#8221;, then you&#8217;ll love this excellent Tron-style retro grid animation!<\/p>\n\n\n\n<p>You can change the colors with the variables <code>$computationalFogBot<\/code> setting the background, and <code>$nodeStreak<\/code> setting the color of the bars.<\/p>\n\n\n\n<p>For another example of this theme, check out this one, too:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNeaYrw\" data-src=\"\/\/codepen.io\/anon\/embed\/oNeaYrw?height=450&amp;theme-id=1&amp;slug-hash=oNeaYrw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNeaYrw\" title=\"CodePen Embed oNeaYrw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Do you know you can also create <a href=\"https:\/\/alvarotrigo.com\/blog\/css-alerts\/\">pure CSS alerts<\/a>?<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"20)-snowfall-effect-animated-background-(css-only)\">20) Snowfall Effect Animated Background (CSS only)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzxJpoE\" data-src=\"\/\/codepen.io\/anon\/embed\/YzxJpoE?height=450&amp;theme-id=1&amp;slug-hash=YzxJpoE&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzxJpoE\" title=\"CodePen Embed YzxJpoE\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I don&#8217;t know whether it&#8217;s the festive season at the time you&#8217;re reading this. For me, it doesn&#8217;t matter. I&#8217;ll put my Santa hat on and watch Elf any time of year. If you feel the same, then here&#8217;s a nice snowfall effect for you &#8211; with actual snowflakes!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"21)-parallax-snowfall-background\">21) Parallax Snowfall Background<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwzEmoM\" data-src=\"\/\/codepen.io\/anon\/embed\/VwzEmoM?height=450&amp;theme-id=1&amp;slug-hash=VwzEmoM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwzEmoM\" title=\"CodePen Embed VwzEmoM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What&#8217;s that you say, you want even more snow? OK&#8230;How about this one then? This has much heavier snowfall, and a very nice <a href=\"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-parallax-effect-with-css-only\/\">parallax effect<\/a> to boot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"22)-infinite-triangles\">22) Infinite triangles<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRvYNVd\" data-src=\"\/\/codepen.io\/anon\/embed\/GRvYNVd?height=450&amp;theme-id=1&amp;slug-hash=GRvYNVd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRvYNVd\" title=\"CodePen Embed GRvYNVd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This one plays tricks with your brain. Are the triangles moving up or down? Expanding or contracting? No one knows &#8211; that&#8217;s fun.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"23)-floating-heart-infinite-animation\">23) Floating Heart Infinite Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNEaoVm\" data-src=\"\/\/codepen.io\/anon\/embed\/WNEaoVm?height=450&amp;theme-id=1&amp;slug-hash=WNEaoVm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNEaoVm\" title=\"CodePen Embed WNEaoVm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Much like the triangles above, here&#8217;s another CSS background animation that falls squarely into the &#8220;trippy&#8221; category. With this one, not only do you get a cool background animation, but you get to open your chakras at the same time. Bonus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"24)-css-fireflies\">24) CSS Fireflies<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKvGNOj\" data-src=\"\/\/codepen.io\/anon\/embed\/KKvGNOj?height=450&amp;theme-id=1&amp;slug-hash=KKvGNOj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKvGNOj\" title=\"CodePen Embed KKvGNOj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>These little fireflies invoke a sense of wonder and intrigue. The effect looks cool with the forest background, but works well on just a plain color, too:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEJqLzY\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEJqLzY?height=450&amp;theme-id=1&amp;slug-hash=ZEJqLzY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEJqLzY\" title=\"CodePen Embed ZEJqLzY\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"25)-hypno-squares\">25) Hypno-Squares<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYEPgON\" data-src=\"\/\/codepen.io\/anon\/embed\/eYEPgON?height=450&amp;theme-id=1&amp;slug-hash=eYEPgON&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYEPgON\" title=\"CodePen Embed eYEPgON\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>These Hypno squares are cute and pretty unique. Don&#8217;t look at them too long though &#8211; they might be transmitting subliminal messages to your subconscious mind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"26)-blurry-bubbles-animation\">26) Blurry Bubbles Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWaxprX\" data-src=\"\/\/codepen.io\/anon\/embed\/XWaxprX?height=450&amp;theme-id=1&amp;slug-hash=XWaxprX&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWaxprX\" title=\"CodePen Embed XWaxprX\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>These blurred\/slightly out-of-focus bubbles pop into existence seemingly at random, bring delight and happiness for a short time, and then slowly but inevitably fade away. Which, incidentally, is also an accurate description of my love life &#8211; but that&#8217;s a story for another time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"27)-css-animated-lava-lamp\">27) CSS Animated Lava Lamp<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxLygKR\" data-src=\"\/\/codepen.io\/anon\/embed\/xxLygKR?height=450&amp;theme-id=1&amp;slug-hash=xxLygKR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxLygKR\" title=\"CodePen Embed xxLygKR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>OK, so far you&#8217;ve seen some cool CSS background animation examples which you can pretty much plug and play. Now let&#8217;s explore what&#8217;s possible when you&#8217;re at the top of your game &#8211; starting with this CSS-only lava lamp by <a href=\"https:\/\/codepen.io\/szudi\" target=\"_blank\" rel=\"noopener nofollow\">Janos Szudi<\/a>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"28)-matrix-effect-animated-background-(css)\">28) Matrix Effect Animated Background (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYjgxPy\" data-src=\"\/\/codepen.io\/anon\/embed\/LYjgxPy?height=450&amp;theme-id=1&amp;slug-hash=LYjgxPy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYjgxPy\" title=\"CodePen Embed LYjgxPy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is nice. The whole thing is done just through color changes on the little square elements, creating an instantly recognizable effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-11-15\/i-know-css-meme.jpeg\" alt=\"I know css meme\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"29)-lighthouse-at-night-css-background-animation\">29) Lighthouse at night CSS background animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwzEPZM\" data-src=\"\/\/codepen.io\/anon\/embed\/VwzEPZM?height=450&amp;theme-id=1&amp;slug-hash=VwzEPZM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwzEPZM\" title=\"CodePen Embed VwzEPZM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>How about this amazing piece of work by <a href=\"https:\/\/codepen.io\/CameronFitzwilliam\" target=\"_blank\" rel=\"noopener nofollow\">Cameron Fitzwilliam<\/a>! Now, this one <em>does<\/em> use JS&#8230; but&#8230; the JS just controls the way the image reacts to your mouse movement. You can delete all the JS and the animations on the wave and the lighthouse light will still work. So I&#8217;m allowing it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"30)-single-div-pure-css-book-search\">30) Single Div Pure CSS Book Search<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWMZdLP\" data-src=\"\/\/codepen.io\/anon\/embed\/QWMZdLP?height=450&amp;theme-id=1&amp;slug-hash=QWMZdLP&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWMZdLP\" title=\"CodePen Embed QWMZdLP\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is a really nice and cute CSS animation by the awesome <a href=\"https:\/\/lynnandtonic.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Lynn Fisher<\/a>. But check out the HTML box in the editor. No, don&#8217;t adjust your monitor, you are seeing that right &#8211; she made this using a <strong>single div<\/strong>. Pure CSS doesn&#8217;t get any purer than that! Or does it&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"31)-diagonal-lines-animation\">31) Diagonal Lines Animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLxxxJZ\" data-src=\"\/\/codepen.io\/anon\/embed\/yLxxxJZ?height=450&amp;theme-id=1&amp;slug-hash=yLxxxJZ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLxxxJZ\" title=\"CodePen Embed yLxxxJZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This animation won&#8217;t require you to write a single line of HTML, it&#8217;s all done in CSS alone.<\/p>\n\n\n\n<p>The lines on the background are created using the <code>repeating-linear-gradient<\/code> property and then animated as usual by using and <code>keyframes<\/code> animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"32)-snow-background\">32) Snow Background<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYzzzyx\" data-src=\"\/\/codepen.io\/anon\/embed\/vYzzzyx?height=450&amp;theme-id=1&amp;slug-hash=vYzzzyx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYzzzyx\" title=\"CodePen Embed vYzzzyx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Ideal to use for the Christmas season to give your page a new design.<\/p>\n\n\n\n<p>This animation uses parallax animation to animate at different speeds the different layers of snowballs. This way it creates a more realistic effect of perspective when combined with the blurry effect of the snowballs that are further away.<\/p>\n\n\n\n<h2 id=\"33-animated-stars-background\" class=\"wp-block-heading\">33) Animated Stars Background<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYwJZxE\" data-src=\"\/\/codepen.io\/anon\/embed\/eYwJZxE?height=450&amp;theme-id=1&amp;slug-hash=eYwJZxE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYwJZxE\" title=\"CodePen Embed eYwJZxE\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is a beautiful background animation displaying some falling stars. It is made purely in CSS and HTML. There is no JS involved and no external libraries or components.<\/p>\n\n\n\n<p>It uses the <a href=\"https:\/\/sass-lang.com\/\" rel=\"nofollow noopener\" target=\"_blank\">pre-processor SCSS<\/a>, but you can convert the code to CSS anyway.<\/p>\n\n\n\n<p>It&#8217;s amazing what CSS can achieve these days and the imagination of the developers creating these animations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"33)-no-div-car-css-animation\">34) No Div Car CSS animation<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWvPJWY\" data-src=\"\/\/codepen.io\/anon\/embed\/MWvPJWY?height=450&amp;theme-id=1&amp;slug-hash=MWvPJWY&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWvPJWY\" title=\"CodePen Embed MWvPJWY\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here <a href=\"https:\/\/codepen.io\/abxlfazl\" target=\"_blank\" rel=\"noopener nofollow\">abxlfazl khxrshidi<\/a> has gone a step further, and made this CSS animated background of a car (one that&#8217;s gonna get pulled over very soon by the looks of it!), with no <code>div<\/code> at all!<\/p>\n\n\n\n<p>Check for yourself, the HTML box is empty, apart from comments. How they&#8217;ve done it, is to apply all their CSS to the <code>html<\/code> element.<\/p>\n\n\n\n<p>It&#8217;s pretty amazing what you can come up with when you&#8217;ve mastered your craft! But one of the cool things about front-end web development is that we can use code snippets, libraries, and CSS frameworks made by people much more skilled than us. That way, we don&#8217;t have to wait until we reach mastery to start making really cool stuff.<\/p>\n\n\n\n<p>One such library I recommend you check out is <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a>.<\/p>\n\n\n\n<p>\n    <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">\n        <video width=\"680\" height=\"382\" controls muted autoplay loop>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.mp4\" type=\"video\/mp4\" \/>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.webm\" type=\"video\/webm\"\/>\n        Your browser does not support the video tag.\n        <\/source><\/source><\/video>\n    <\/a>\n<\/p>\n\n\n\n<p>fullPage helps you build full page sites &#8211; where you split your webpage into chunks, each taking up the full size of the user&#8217;s browser. You know the type &#8211; as you scroll, you move to the next page, rather than scrolling down just a little bit.<\/p>\n\n\n\n<p>With fullPage you&#8217;d be able to integrate the different CSS background animations we&#8217;ve just looked over here, maybe putting a different one on each page. If that sounds like something that might work well on one of your projects, then check out some examples of what it can do here: <a href=\"https:\/\/alvarotrigo.com\/fullPage\/#examples\">fullPage.js examples<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-posts\">Related Posts<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/7-scroll-text-animations-css-and-js\/\">Awesome scroll text animations with CSS and JS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">All types of CSS Text Animations<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/animated-slider\/\">Amazing animated Sliders for Inspirations and with Examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-animations-scroll\/\">How to Create CSS Animations on Scroll [With Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/10-cool-css-animations-to-add-to-your-website\/\">Cool CSS animations to add to your site<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Do you need some great-looking CSS background animations for your web projects? Here are 20 of the best!<\/p>\n","protected":false},"author":6,"featured_media":4689,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,17],"class_list":["post-4690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":11,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions"}],"predecessor-version":[{"id":18875,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions\/18875"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4689"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}