A set of cool text effects made with CSS. The effects show different uses for text overlays like as offset text-shadow and the use of halftone patt...

A set of cool text effects made with CSS. The effects show different uses for text overlays like as offset text-shadow and the use of halftone patterns as underlay shadow. Created by CodePen user Flowuhh.

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of bri...

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of brightness, contrast, blur, saturation, and color while the image on top showcases the changes in real time. Created by CodePen user Andreas Wik.

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcase...

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcased with buttons structured in HTML via PUG. Created by CodePen user strafeOK

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a l...

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a linear motion, taking over the whole button background while on-hover. Created by CodePen user Sammy Helali.

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The ...

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The effects are coded in SCSS and structured in a simple HTML layout. Created by CodePen user @cecilehabran.

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradien...

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradients, one dynamic and the other fixed, both locked to the viewport dimensions and pulled behind the text, similar to the scroll indicator. Created by CodePen user Mike Riethmuller.

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the ele...

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the element's bottom section; to make the desired impact, neon colors are used over a black background. Element created by CodePen user Amit Ashok Kamble.

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animatio...

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animations that can be fun to play with. You can find all you need in one CSS file; then you'll be ready to start adding animation to your content with simple classes. Developed by Kristoffer Andreasen.

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between opt...

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between options it showcases a transition with an awesome "blob" feeling. Created by Codepen User Adam Kuhn.

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian A...

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian Andre making use of Sass.

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their correspondin...

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their corresponding indexes in the carousel. It's fully responsive, features smooth transition animations and supports touchscreen 

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift ...

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift Off, Hologram, Diagonal Swipe, and more!

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes in...

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes included in the snippet.

Rhyne Vlaservich delivers a stunning, less formal looking CSS framework to create neat looking websites with a paper-written effect. PaperCSS featu...

Rhyne Vlaservich delivers a stunning, less formal looking CSS framework to create neat looking websites with a paper-written effect. PaperCSS features a Flexgrid system that supports 12 columns per row, great looking typography that actually looks handwritten, and neat tables, lists, forms, etc. Definitely worth taking a look at more of the features of this great piece of work! 

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the ...

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the rectangle that goes along the text to signify loading is in progress.

Another amazing pen by Codepen user Jamie Coulter, this is a UI component made in CSS for a pop out effect to display statistics or other relevant ...

Another amazing pen by Codepen user Jamie Coulter, this is a UI component made in CSS for a pop out effect to display statistics or other relevant information.

Breadcrumbs a neat navigation solution by dribbble user John Wilson, created as a custom navigation solution for Envy's Ivy app. As the user approa...

Breadcrumbs a neat navigation solution by dribbble user John Wilson, created as a custom navigation solution for Envy's Ivy app. As the user approaches the top left back button, the breadcrumbs expand and allow the user to navigate to different parts of the site/app. Pen uploaded by codepen user Andreas Storm, the snippet is made in pure CSS.

Made by Codepen user Jamie Coulter, this is a code snippet for a neatly designed and animated order/process bar here where you can click on the dif...

Made by Codepen user Jamie Coulter, this is a code snippet for a neatly designed and animated order/process bar here where you can click on the different steps and be presented with information. The animation on the box at the top changes depending on which step you're currently viewing.

This is a neat CSS and JS code snippet for making a before-after layer slider that allows up to 3 states to take advantage of. Created by Codepen u...

This is a neat CSS and JS code snippet for making a before-after layer slider that allows up to 3 states to take advantage of. Created by Codepen user Huw.

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation...

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation options. It's lightweight and doesn't affect loading times. Uploaded by Codepen user Jay Pick

Based on dribbble users' Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys...

Based on dribbble users' Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys different options for contact upon interaction.

This is a neat experiment that simulates a motion blur effect every time a slide is switched in a carousel. It takes advantage of SVG Gaussian Blur...

This is a neat experiment that simulates a motion blur effect every time a slide is switched in a carousel. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Snippet created by Codepen user Damián Muti

Javascript code snippet that creates a highlighting effect when you hover on links, the effect then follows the cursor, highlighting the links as y...

Javascript code snippet that creates a highlighting effect when you hover on links, the effect then follows the cursor, highlighting the links as you go.

A CSS snippet published by codepen user giana, allows creating nice, animated shimmering neon effects for text.

A CSS snippet published by codepen user giana, allows creating nice, animated shimmering neon effects for text.

A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly g...

A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly generated color transition gradients and tesselations in the style of Material Design. This jaw-droppingly beautiful JS/CSS snippet can come in handy for photo galleries or header effects.

A really nice CSS snippet to create a 3D login form, a great 3D effect ready to use in your next project.

A really nice CSS snippet to create a 3D login form, a great 3D effect ready to use in your next project.

A really nice experiment to simulate a bezier mesh projection with pure code, grid interaction is fastest in Chrome.

A really nice experiment to simulate a bezier mesh projection with pure code, grid interaction is fastest in Chrome.

A nice presentation effect which shows photos as 3D slides, it takes photos randomly from Unsplash, however, you can add the source you want.

A nice presentation effect which shows photos as 3D slides, it takes photos randomly from Unsplash, however, you can add the source you want.

A handful CSS3 library that animate objects with different easing effects (fade, flip, zoom, etc) while you are scrolling down, when you scroll up ...

A handful CSS3 library that animate objects with different easing effects (fade, flip, zoom, etc) while you are scrolling down, when you scroll up they return to its initial position.

A sleek effect of flying anti-gravity particles, ideal for headers, presentations, slideshows and related!

A sleek effect of flying anti-gravity particles, ideal for headers, presentations, slideshows and related!

A sleek material design color selector, with nice reactive animations and hover effects.

A sleek material design color selector, with nice reactive animations and hover effects.

A cool particle effect made with pure CSS. This simple snippet can help your website give a little realism to it, without affecting the page load. ...

A cool particle effect made with pure CSS. This simple snippet can help your website give a little realism to it, without affecting the page load. You can alter the direction, size, speed and color of the particles.

A CSS and JavaScript snippet that shows an image transition with exploding particles that looks like a 3D effect. It can be used in a website or a ...

A CSS and JavaScript snippet that shows an image transition with exploding particles that looks like a 3D effect. It can be used in a website or a mobile app, is lightweight and does not affect the page load.

A beautiful plugin made with JavaScript for creating a simple trampoline effect that can be applied to any element, especially great for galleries ...

A beautiful plugin made with JavaScript for creating a simple trampoline effect that can be applied to any element, especially great for galleries image showcases. This plugin comes along with an article where Mary Lou explains us the creation process.

A menu made with navicons that transform when clicked. The icons start as the regular stack icon for "menu", but once clicked it turns into arrows ...

A menu made with navicons that transform when clicked. The icons start as the regular stack icon for "menu", but once clicked it turns into arrows (pointing three directions), a cross for closing, a plus sign for adding and a minus sign. It was created by Bennett Feely.

A set of effects for modals created with CSS. They animate thanks to CSS transforms and animations that are supported by several modern browsers, a...

A set of effects for modals created with CSS. They animate thanks to CSS transforms and animations that are supported by several modern browsers, and some effects use SVG animations of morphing paths with the help of Snap.svg. The resource is free and it comes with an article explaining the process.

A subtle effect that allows you to display the image and then have a corner fold whenever the reader hovers over the element. It uses span elements...

A subtle effect that allows you to display the image and then have a corner fold whenever the reader hovers over the element. It uses span elements instead of :before and :after pseudo-elements in order to ensure compatibility with multiple browsers. Uploaded to CSS Deck by Rishabh.