Category: Collections

Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create.

From simple scrolling animations to complex environments built entirely of code, these effects can add a lot of personality to your website.

What if you could use CSS backgrounds created by others for free? Sites like CodePen were made to host open source or other freely-licensed code, which means you can use it in your own projects with few-to-no stipulations.

This is also helpful for designers who want to learn CSS or pull off a similar, but personalized look. You can use these code snippets as a base to create your own effects.

There are a ton of developers who have created amazing CSS backgrounds and released them for free. Today we’ve collected 15 of the most stunning ones. See for yourself what you can do with a creative mind and a little code!

Parallax Pixel Stars

See the Pen
Parallax Star background in CSS by Saransh Sinha (@saransh)
on CodePen.

Gradient Background Animation

See the Pen
Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O)
on CodePen.

Frosted Glass Effect

See the Pen
CSS only frosted glass effect by Gregg OD (@GreggOD)
on CodePen.

Shooting Star

See the Pen
Only CSS: Shooting Star by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

Fixed Background Effect

Tri Travelers

See the Pen
Tri Travelers by Nate Wiley (@natewiley)
on CodePen.

ColorDrops

See the Pen
ColorDrops by Nate Wiley (@natewiley)
on CodePen.

Animated Background Header

See the Pen
Animated Background Header by Jasper LaChance (@jasperlachance)
on CodePen.

Zero Element: DeLight

See the Pen
Zero Element: DeLight by Keith Clark (@keithclark)
on CodePen.

Glowing Particle Animation

See the Pen
CSS Glowing Particle Animation by Nate Wiley (@natewiley)
on CodePen.

Background Image Scroll Effect

See the Pen
Pure CSS Background Image Scroll Effect by carpe numidium (@carpenumidium)
on CodePen.

Multiple Background Image Parallax

See the Pen
CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium)
on CodePen.

Bokeh Effect

See the Pen
Bokeh effect (CSS) by Louis Hoebregts (@Mamboleoo)
on CodePen.

Calm Breeze Login Screen

See the Pen
Calm breeze login screen by Lewi Hussey (@Lewitje)
on CodePen.

Effect Text Gradient

See the Pen
Effect Text Gradient by Diogo Realles (@SoftwaRealles)
on CodePen.

Creatively Beautiful CSS Backgrounds

Good web design leaves a lasting impression on visitors, and there’s always something extra enchanting about a well-made animation. Whether you go all out with an animated starry or gradient background, or you just add some elegant and subtle parallax effects to your site, it can do wonders for your design.

CodePen hosts exclusively open source code, made by developers as a contribution to the community. So, if one of these effects caught your eye, feel free to copy it, tweak it, or use it as a base for making your own CSS animations.

Just remember to use the same license, and everything on CodePen is free to use.

Have you ever visited a website and been stunned by a beautiful hover effect? Or have subtle UI animations left you feeling impressed with a site’s design? It may seem like a small detail, but hover animations can have a larger impact than you’d expect.

Good UI design means making interactive elements clear and visible, and hover effects can help you do just that. They look beautiful, and provide instant feedback when you hover over something that makes your UI easy to navigate.

These effects work particularly well in menu areas, but you can also use them on images, buttons, or other areas of your site too. These animations can leave a strong impression on people.

Today we’ve collected 17 awesome CSS hover effects, ranging from elegant menu and image hovers to more striking, unique animations. These are free for use under an MIT license, so try them on your site or use them as inspiration to create your own!

Rumble on Hover

See the Pen
Rumble on Hover by Kyle Foster (@hkfoster)
on CodePen.

Hover.css

See the Pen
Hover.css by vavik (@vavik96)
on CodePen.

Button on Hover Slide Effect

See the Pen
CSS Button On Hover Slide Effect by RazorX (@RazorXio)
on CodePen.

Shaking Shapes

See the Pen
Shaking Shapes by Laura Montgomery (@LauraMontgomery)
on CodePen.

Strikethrough Hover

See the Pen
Strikethrough hover by tsimenis (@tsimenis)
on CodePen.

Hover CSS3

See the Pen
Hover CSS3 by Berlin Eric (@eberlin)
on CodePen.

Image with Slide Up Title

See the Pen
#1107 – Image with slide up title on hover by LittleSnippets.net (@littlesnippets)
on CodePen.

Image and Title with Icons

See the Pen
#1193 – Image & title with icons on hover by LittleSnippets.net (@littlesnippets)
on CodePen.

Gradient Button Hover

See the Pen
Gradient Button Hover by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.

Grow Hover Effect

See the Pen
CSS Grow Hover Effect by Adam Morgan (@AdamCCFC)
on CodePen.

Background Color Change on Hover

See the Pen
CSS Background Color Change on Hover by Ian Farb (@ianfarb)
on CodePen.

Fade Siblings on Hover

See the Pen
CSS-only Fade Siblings on Hover by Shaw (@shshaw)
on CodePen.

Pure CSS Blur Hover Effect

See the Pen
Pure CSS Blur Hover Effect by Matthew Craig (@mcraig218)
on CodePen.

Button Hover Effects

See the Pen
Button Hover Effects by Kyle Brumm (@kjbrum)
on CodePen.

Thumbnail Hover Effect

See the Pen
Pure CSS Thumbnail Hover Effect by Aysha Anggraini (@rrenula)
on CodePen.

Glitch Hover Effect

See the Pen
Glitch hover effect CSS by Kevin Konrad Henriquez (@kkhenriquez)
on CodePen.

Image Hover Effect

See the Pen
Pure CSS – Image Hover Effect by Bruno Beneducci (@brunobeneducci)
on CodePen.

Animate Your Website

When you’re designing a website, don’t neglect UI design. It’s one of the most important parts of a website’s look. And while other details like the layout of UI items, fonts, and colors will take up most of your focus, a well-placed hover animation can make a big difference.

Animations can also help define your brand and the tone of your website, along with help to complement its style. A distinctive glitchy hover effect could brand you as a technology company, or gradient animations would work well on upbeat, colorful websites.

Code on CodePen is free to use with their license, so try out one of these CSS hover effects for yourself. Or use these beautiful animations as inspiration as you make your own unique effects.

CSS is a powerful coding language that can give style and personality to HTML. CSS animations, in particular, are created by transitioning between various CSS configurations over a period of time.

There are a lot of extremely practical cases for CSS animation, such as the ability to animate HTML elements without the use of JavaScript or Flash (although some do utilize JavaScript).

In this article, we’ll be taking a look at 15 lighthearted CSS animation projects to give you inspiration for your next endeavor. These are going to be practical applications that have a certain level of whimsy and fun to them. Hopefully, they’re just as fun to work on!

Google’s Game of the Year

The Game of the Year animation for Google looks like a fairly simple CSS animation. It features the title text falling slightly, and the elements bumping into each other. While there is plenty of code that went into this, the core is animating the rotation of the elements after a delay.

Cascading Solar System

See the Pen
Cascading Solar System! by Tady Walsh (@tadywankenobi)
on CodePen.

The author of cascading solar system obviously has an eye for humor, naming his project so that it also can be abbreviated as CSS. This is an impressive but unassuming animation that models the solar system in 2D. The orbits use a scaled rotation speed so that they’re all accurate to their real-world counterparts.

Gooey Menu

See the Pen
Gooey Menu by Lucas Bebber (@lbebber)
on CodePen.

Menu animations are a pretty common use of CSS, and this gooey menu is no exception. This has plenty of small details, including a slight increase in size when hovering over the button, and then the bouncy, gelatinous animation when the menu expands.

Each individual button then highlights when hovered over. It is also a special treat to notice the subtle details. Take note of how the hamburger menu symbol collapses into an X and transforms back when you close the menu again.

Flying Birds at Fournier Père et Fils

This winery’s homepage features an animation that involves two birds flying across the screen. The process of applying this animation is actually fairly straightforward.

The first layer of animation is to animate the birds flapping their wings, which works much like a flipbook. The second step is the animated vertical and horizontal path that the bird follows, in order to make the speed and flight path look natural. This is done through keyframe animation. The best part is, this can be replicated across any number of birds, you will just need to vary the timing a little bit.

Ball Loading Animation

See the Pen
CSS loading animation by Patrik Hjelm (@patrikhjelm)
on CodePen.

This loading animation is another simple one. It is a vertical line of seven circles that swing back and forth horizontally in a seemingly random pattern.

In terms of CSS code, each ball has its own short few lines of animation. Each ball has the same code except for the length of time that it takes to move side-to-side. This creates a variation between each element.

The rest of the code defines the keyframe points, so really it’s just selecting two keyframe points and varying the amount of time it takes for the circles to travel between them. While straightforward, this is often all you need for a loading screen!

Submarine

See the Pen
Submarine with CSS by Alberto Jerez (@ajerez)
on CodePen.

This CSS exercise features a little red submarine roving the ocean. It has several simple animated elements that come together to make a very pleasing looking loop. This is a lot of keyframing and elements linked to each other, but it’s a fun inspiration for your own CSS projects!

Circles Loading Animation

See the Pen
Animated – SVG Loader by Steven Roberts (@matchboxhero)
on CodePen.

Simple loading screens are one of the best ways to show off CSS, and these concentric circles are no different. The code is pretty quick and simple, essentially telling the circles to ease in and out of rotation at different intervals.

Since the shapes don’t actually change size, and just rotate around, it’s a pretty straightforward exercise in CSS! And it makes a great addition to any website.

Moving Background Mask

See the Pen
Animated – Background Mask by Steven Roberts (@matchboxhero)
on CodePen.

At first glance, you might not realize there is an animation going on here. But look closely, and you’ll see the colored background slowly gliding down. This is an extremely subtle effect, but sometimes that’s what CSS is all about!

At its core, this is using masking as you might see in a photo or video editing software. It only displays the image on the masked layer, and moves the image along a path.

Flat Design Camera

See the Pen
Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm)
on CodePen.

This flat design camera image has a clever concept around it. Press the camera button, and it takes a picture! Well, sort of. The images are predetermined for this code, but the potential for more is there.

This CSS project has several small moving parts, such as the flashing red light on the left side, and the animation of the entire asset as the camera “prints” a photo. Overall, this definitely has some practical applications for any photo-related app that might access a user’s webcam.

Pulse Animation

See the Pen
Animated – SVG Pulse by Steven Roberts (@matchboxhero)
on CodePen.

This is another simple but effective CSS animation. And that’s a trend here! Some of the best uses of CSS are straightforward and simple. No need to get overcomplicated with it.

This one just sends out a few circles that fade out when they expand to their fullest. It’s pretty easy to come up with and to replicate. So, this is a great place to start for a simple CSS project if you’re looking for inspiration as a newcomer to the language.

Bubbling Up

See the Pen
Animated – SVG Bubbles by Steven Roberts (@matchboxhero)
on CodePen.

This bubble animation is made up of a few elements and animations. The first level of animation changes the bubble opacity and makes the image move vertically, so it looks like the bubbles rise up out of nothing.

The second level of animation creates a wobbling effect to make the bubbles look more alive and natural. This makes great use of keyframes, which really make CSS animations look smooth.

Google Now 3rd Party Apps

See the Pen
Google Now 3rd Party Apps by Paweł Kuna (@codecalm)
on CodePen.

This animation is inspired by another designer’s concept that was made in After Effects, but this one does it just with CSS! It’s a cute flat icon pack that pops into existence and slides out. This CSS code makes heavy use of keyframes and timing the different elements as they pop in.

It’s basically just the same code for each icon, but time-adjusted appropriately. This is great inspiration for making something that is simple overall, but is complex when you put all the pieces together.

Hamburger Menu

See the Pen
Hamburger Icon CSS3 ONLY Animation by Dawid Krajewski (@DawidKrajewski)
on CodePen.

Don’t let this simple hamburger menu fool you, it’s actually quite complicated. This doesn’t use any HTML or JavaScript and is entirely made in CSS.

What makes this complex is the fact that it doesn’t use HTML, so all of the shapes in this animation had to be created within CSS alone. From there, there is a lot of keyframe animation to construct the transformation between shapes. This should get you inspired to ditch the traditional HTML and try something different!

Perspective Split Text Animation

See the Pen
Perspective Split Text Menu Hover by James Bosworth (@bosworthco)
on CodePen.

This animated menu looks simple on the outside but can make a big impact on any website. When you hover over the area, the text changes perspective to follow your mouse. When you hover over a specific block of text, it gets split in half.

The animation uses some different techniques to achieve these goals, so it’s a great inspiration as an exercise for practicing some advanced CSS skills.

Floating Ghost

See the Pen
ghost by Beep (@scoooooooby)
on CodePen.

Let’s end with something fun! This adorable ghost just floats up and down, indefinitely. The image just eases in and out, up and down, and the shadow underneath expands and contracts. This simple animation is versatile and can be used as a loading screen or just about anything else!

A Moving Inspiration

CSS is a powerful tool in your web design pocket. Hopefully, these funny and lighthearted animations can inspire you to go out and create your own awesome concepts.

Always remember that you don’t have to make something just for productivity’s sake! You can create something just for fun – even if it serves no purpose. And who knows, maybe someone else will see it, and become inspired themselves.

Animation is a staple of web and UI design. A perfectly still website devoid of even subtle hover states can feel incomplete, like something essential is missing.

Luckily, there are many ways to add animations to your website. WebGL, JavaScript, and even HTML5 all support or are dedicated to animation. But one of the easiest to learn and implement are CSS animations.

Flash was another source of lightweight, easy to create animations for websites. But with Flash being finally deprecated, many designers are turning to CSS to enhance their websites with beautiful motion graphics.

While CSS animation is easy to learn as far as web animation platforms go, it can still take a lot of time to master it. And it can really help to have some example code to learn from and use in the meantime.

Today we’ve collected for you some copy-and-paste cheat sheets for CSS animations. If you need some beautiful animations to include in your design, quick code for a test website, or want to learn from the code snippets provided, you’ll love this collection of animations.

CSSFX

With dozens of beautifully clean animations, CSSFX offers a great start for those who need small and simple effects for their site. In particular you’ll find a lot of interesting loading animations and quite a few hover states as well. Just click the ones you like to copy their code and see for yourself how they did it.

Animista

Need something with a little more customization? Animista has nearly 20 types of CSS animations to browse, each coming with tons of extra settings to change to your liking. Add animations you want to save to your favorites, then click the generate button to get the code.

Epic Spinners

Everyone loves spinners. They’re cute, fun to look at, and they can keep people interested for the few seconds it takes a page to load. Or they just make great page decorations! Click a spinner to see its code, and use it with Vue.js too.

Easing Functions Cheat Sheet

An easing function explains how an animation accelerates and decelerates throughout the frames. Animations can move linearly, smoothly, or even bounce rapidly back and forth.

A linear animation with no easing of any kind is often boring. Use this easing function cheat sheet to easily create unique and smooth animations.

Transformicons

Transformicons are icons that shift between states when clicked. A few extra icons like loading bars and scroll indicators are included as well. Just click to see a preview of the icon in action, and toggle to select the ones you want to build code for.

These CSS icons do use a little JavaScript, but it’s only a few extra lines. The clean animated buttons are more than worth it.

CSS Animation Made Easy

Every site could use a little movement. Too much animation can be jarring depending on the style of website you have, but subtle animations like parallax and CSS can add style without being distracting.

CSS animations work so universally well because they’re simple and subtle, while still adding a lot of personality. Other types of animation can also add bloat and cause a site to slow down for some users, but CSS is quick and light on users’ systems.

Cheat sheets are a big help to animators and web designers both. For UI designers, it’s useful to see clean code in action. Creating your own code becomes much easier with a reference. And for those unfamiliar with CSS animation, you can still get the benefit of beautiful motion graphics.

So, make sure to try out these beautiful animations for yourself. Add them to your website and see how they can enhance your design.