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.

This is a parallax element created with the use of CSS exclusively. The effect takes place when the page is scrolled, hiding the previous element over the next with a subtle slide action on the background and the content in the element. As mentioned, no Javascript required, just plain CSS and HTML. Created by CodePen user Yago Estévez.

This is a set of subtle text link animations created making use of plain CSS. The design approach used with these elements is more on the sober, nothing major, nothing overly fancy, just enough to provide the feedback interaction in a user interface. Created by CodePen user Josip Psihistal.

This is an on-spot 3D depth effect made by using mapped distortion constraints based on masked layers and WebGL. The graphics library is ported through twgl.js (Tiny WebGL), that also makes its use less verbose. Created by Robin Delaporte, photo by Charles Deluvio.

This is a responsive, sortable, filterable and draggable grid layout based on Muuri.js. Muuri is a JavaScript layout engine that allows you to build all kinds of layouts. It is a combination of Packery, Masonry, Isotope, and Sortable. Demo example created by CodePen user 王兆羽 B.C.Wang.

This is a lazy loading element created with the use of inline SVG to create lightweight thumbnails. This resource is mainly meant to show and enhance the user's experience with lazy loading images to render them first while keeping the association with the space and the relation with the image's shape. Created by CodePen user Mikael Ainalem.

This is an awesome color picker resource that generates random color palettes given a predefined list of colors. It makes use of a diverse set of libraries like ChromaJS, husl.js, and nearestColor.js for making all kinds of color manipulations while searching the nearest given color value. Created by CodePen user David A.

This is a clever use of CSS for recreating a check from brunch at a diner. It is structured by making use of CSS Grid display capabilities and the homemade apple typeface that brings the handwritten touch to the general rustic design. Created by CodePen user Jules Forrest.

This is a set of seven SVG illustrations animated via CSS with a slight help of JS. It mainly implements CSS keyframes compiled through Sass, and uses JS for centering to the origin the elements within each illustration that are being animated. Created by CodePen user Stefan (EntropyReversed)

This is a cookie policy consent toggle switch created with JS and SCSS. It uses SVG graphics to give form to the cookie icon that with the help of Tweenmax JS showcases a neat broken cookie transition. Created by CodePen user Darin (dsenneff).

This is an arrangement of boxes that on hover resize to take more space within its container. The hover properties and the width on the boxes are achieve through pure CSS but it also makes use of Sass variables only for setting colors and font sizes. This expanding grid was created by CodePen user Joel Duke.

This is an amazing shading effect for images that take advantage of the shading capabilities of OpenGL brought to the web through ThreeJS. Essentially it's just setting ThreeJS up so that it renders a flat surface upon which to draw the shader. Created by CodePen user Liam Egan.

This is a minimalistic images carousel built with FlexBox display layout and jQuery. The slider action is controlled via jQuery, styled by making use of pure CSS with a really nice transition effect that feels almost like if you were taking photographies. Created by CodePen user Veronica (@veronicadev).

This is an instant and strong password generator built with Vue.js 2. The UI consists on three stepped sliders positioned on the bottom, a center green slider showcasing the password’s strength and an upper box where you can check and copy the password itself. Created by CodePen user Nour Saud (@nourabusoud).

This is a set of hamburger menu icons with nice animations and subtle interactions. Each icon has hover states that really clues in the users to what is going to happen on click. Created by CodePen user Ahmad Emran.

This is a neat button effect that on hover showcases a radial gradient based on the mouse position relative to the button. It makes use of Sass variables that in tandem with JavaScript gives the relation of the mouse position and assigns the proper color gradient to the element. Created by CodePen user Tobias Reich.

A minimal text list with a neat slice effect for deleting the items on the list. It uses plain HTML in its structure with SVG close icons and CSS compiled through Sass for aiding in the transitions, transformation and general style of the text blocks while using the jQuery functions for triggering the actions. Created by CodePen user Aaron Iker.