An easy switching function based on SASS for generate a Dark/Light selection for your site's UI. Created by Codepen user Kaio Rocha

A ready-to-use functional grid menu template based on CSS. Created by Codepen user Simon

A cool displacement effect for your SVG images that will apply with the scrolling interaction of the user. Created by Codepen user Mert Cukuren

A nice sample of a Vue sliding interaction for UI. Created by Codepen user Henry Desroches, inspired by a Dribbble shot.

A cool scrolling animation for your website images or photo-slides based on a lateral out-of-plane movement, created on CSS by Codepen user ImGonzalves

This is a circular image transition made by David Khourshid and Stephen Shaw, using CSS masks, some fancy text effects and mouse position tracking with CSS variables.

This a navigable information card created using mostly pure CSS and Splitting.js for dividing words and characters. Created by Codepen user Adam Kuhn

This is a comprehensive set of weather icons with a bold line style based on SVG's and animated using CSS, preprocessed with Sass. They're looped animations and will bring interactiveness to your weather-related projects. Created by Codepen user, Kasper De Bruyne.

An animated CSS switch animation inspired on a Dribbble motion study case, made by Aaron Iker

A Dribbble moving gallery study recreation made by Jacob Foster

A cool CSS slider made with Splitting.js and lots of checkbox & radio button hacks by Adam Kuhn

An emulation of double-exposure photographic technique using canvas blend modes. Double exposure combines 2 different images into a single image.

Made by Mikael Ainalem, using clip-path times two to make an irregular shaped object filling out a cut-out shape in an unfold open menu effect.

Find 30 different ways to recreate a grid layout with the same markup using CSS flex-box

A collection of trendy CSS gradients that you can use for your projects. Created by Tamino Martinius.

An amazing paper bird 3D-like flying animation, made entirely using CSS coding. Created by Yusuke Nakaya.

An interactive CSS grid style guide with 5 color palettes created for testing different text styles and in general to aid you with the development of any new web project. Created by Codepen user Olivia Ng.

This is a collection of different types of masks approaches to test how browsers support them. The demos were made without fallbacks, so you can open them in different browsers to check how they support the collected features. Created by CodePen user yoksel.

Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow. Simply hold CTRL and move your mouse around to see the dimensions in px and apply an outline class to every hovered element. You can also have the possibility to specify a custom class I want to apply to different elements without the need to comment and uncomment the CSS files.

A navigation menu that slides into/out the screen from an off-canvas position on your website. Among other features, it: Hides nav open btn when the nav is open, adding/removing open classes to nav and content. Includes navigation and a content block. Available for CSS, HTML, and Javascript.

This is an endless scroll receipt element that gets real product names from CVS. Its basic layout and style are based out of plain CSS and HTML while the web scrapping process is handled via vanilla JavaScript. Created by CodePen user Garrett W. (@garrettbear).

A modern hamburger menu icon for web UIs with nice transitions between its closed, hover, and open states. The button on-click events are controlled via jQuery, and styled with CSS compiled through Sass to keep it well organized and cross-browser compatible. Created by CodePen user Akshay (@akshaycodes).

This is a set of checkbox and radio buttons with a nice flat design and fluid contrasting animations. The buttons have a round structure and the animations used are really compelling with the way they bring and deploys interactions to users in an interface. They are created as components out of Javascript and CSS precompiled through Sass. Created by CodePen user Valery Alikin.

This is a compact chat box with smooth transitions and a material design aesthetic built with jQuery and CSS. This chat bar is fully interactive with all its events are controlled via jQuery and its animations and general style achieved through CSS precompiled through SCSS with some SVG elements to keep it fast and ready. Created by CodePen user Aaron Iker based on Oleg Frolov's Interaction design.

This is a collection of CSS effects made with Vue.js. Among the diverse elements, you will find hover effects for links and buttons, loading loops animations and some other UI elements. Designed by GitHub user Emil Kowalski (emilkowalski), free for personal and commercial use.