Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018


By

With all of the changes and rapid advancements CSS has gone through over the last few years, we should not be surprised at the vast volume of open-source resources and tools that are continually being released.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 100 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year (2018). No doubt, you’ll find something interesting!


New CSS Libraries

WickedCSS Animations – A library of pure CSS animations.
CSS Resources Free WickedCSS animations


Motus – An animation library that mimics CSS keyframes when scrolling.
Motus


ScrollOut – Detects changes in scrolling for reveal, parallax and CSS variable effects.
ScrollOut


SimpleBar – Create cross-browser, custom scrollbars using pure CSS.
SimpleBar


Repaintless.css – A lightweight CSS animation library.
Repaintless.css


Three Dots – A collection of loading animations – all with just 3 little dots.
Three Dots


Splitting – Library for animating text and grids with CSS variables.
Splitting


Epic Spinners – A collection of CSS-only spinning icons with VueJS integration.
CSS Resources Free Epic Spinners


Boilerform – An HTML and CSS boilerplate to take the pain away from working with forms.
CSS Resources Free Boilerform


Micron.js – A micro-interaction library built on CSS and JS.
CSS Resources Free Micron.js


AnimTrap – A CSS & JavaScript framework for animations.
CSS Resources Free AnimTrap


Pure HTML5 and CSS3 SVG Loaders – An attractive collection of loading images you can download for free.
CSS Resources Free 16 Free Pure HTML5 and CSS3 SVG Loaders

CSS Utilities

basicScroll – A tool that allows you to change CSS variables depending on the scroll position.
CSS Resources Free basicScroll


Unused CSS – A tool that scans your website for any unused CSS selectors.
CSS Resources Free Unused CSS


Purgecss – A tool that removes unused CSS from your site.
CSS Resources Free Purgecss


sanitize.css – This CSS library corrects broken and missing styles.
sanitize.css


CSS Gridish – Build a Sketch file and CSS Grid code from your project’s specs.
CSS Resources Free CSS Gridish


OptiCSS – A template-aware CSS optimizer.
CSS Resources Free OptiCSS


Mort – A tool for detecting “dead” CSS.
CSS Resources Free Mort

CSS Image Effects

Instagram.css – A complete set of Instagram filters in pure CSS.
CSS Resources Free Instagram.css


Pure CSS Halftone Effect – How to create a mesmerizing effect with CSS.
CSS Resources Free Pure CSS Halftone Effect


CSS Glitch Effect – Mary Lou shares an experimental glitch effect powered by CSS animations and the clip-path property.
CSS Resources Free CSS Glitch Effect


Direction Aware Hover Effects – Nifty CSS/JS hover effects based on the direction a user is coming from.
CSS Resources Free Direction Aware Hover Effects


For more CSS-based image effects, take a look at this library collection.

CSS Layout Frameworks

Atomic Bulldog Grid – A CSS Grid layout, with partial fallback to Flexbox.
CSS Resources Free Atomic Bulldog Grid


BuddyCSS – A simple CSS framework that aims to make development easier.
BuddyCSS


60GS – A 60-column CSS Grid starter kit.
60GS


Teutonic CSS – A modern CSS framework that weighs in at just 12KB.
Teutonic CSS


ModestaCSS – A clean CSS framework that is both dark and responsive.
ModestaCSS


Flat Remix CSS Library – A set of predesigned elements that make for faster development.
CSS Resources Free Flat Remix CSS Library


FICTOAN – An intuitive SCSS framework that also moonlights as a UI kit.
CSS Resources Free FICTOAN


Mustard UI – Billed as a CSS framework that “actually looks good”.
CSS Resources Free Mustard UI


Material – This framework combines Bootstrap 4 with Google’s Material Design.
CSS Resources Free Material


Smart CSS Grid – A minimal and responsive CSS Grid system.
CSS Resources Free Smart CSS Grid


Biomatic UI – A flexible atomic-focused CSS framework.
CSS Resources Free Biomatic UI


Tailwind CSS – A utility-first CSS framework for rapid UI development.
CSS Resources Free Tailwind CSS


PaperCSS – The less formal CSS framework.
CSS Resources Free PaperCSS


For more CSS layout frameworks, take a look at this collection.

CSS Flexbox Frameworks

Frow CSS – An open source HTML & CSS framework using Flexbox.
CSS Resources Free Frow CSS


Cirrus – A responsive CSS framework that uses Flexbox.
Cirrus


Butter Cake – An open source CSS framework that is based on Flexbox.
Butter Cake


Flexit – A simple and clean CSS Flexbox grid.
Flexit


Strawberry – A light-weight CSS Flexbox framework.
Strawberry


Katana.scss – A CSS Flexbox-based layout system.
CSS Resources Free Katana.scss


Flexible Grid – A framework that will help you implement CSS Flexbox.
CSS Resources Free Flexible Grid


For more flexbox resources, take a look at this article.

Web-Based CSS Tools & Generators

FlexBox Parent Attribute Visualizer – An interactive way to see the effect of various CSS Flexbox settings.
CSS Resources Free FlexBox Parent Attribute Visualizer


Fancy Border Radius Generator – A tool that goes beyond the basic rounded corners.
Fancy Border Radius Generator


TinyEditor – Edit HTML/CSS/JS with this super-light app.
TinyEditor


css-doodle – A web-based tool for drawing patterns with CSS.
css-doodle


Fonty – A tool for testing web fonts directly on a live website.
Fonty


CSS Duotone Generator – Create an awesome, customized duotone image with HTML and CSS.
CSS Duotone Generator


StyleURL – A tool that allows for making changes to CSS collaboratively.
StyleURL


Gradient Joy – Use gradients as placeholder images.
Gradient Joy


Font Playground – A place to play with variable fonts.
Font Playground


Keyframes.app – A web app and Chrome extension for creating CSS animations.
CSS Resources Free Keyframes.app


Visually Build Responsive Layouts with CSS Grid – A tool to help you build a responsive CSS grid.
CSS Resources Free Visually Build Responsive Layouts with CSS Grid


CSS Alignment Cheatsheet – A nicely-illustrated guide to aligning all the things.
CSS Resources Free CSS Alignment Cheatsheet


Clippy – An online tool you can use to create a CSS clip-path.
CSS Resources Free Clippy


GradPad – An online to for creating CSS color gradients.
CSS Resources Free GradPad


Trianglify.io – Generate custom low poly patterns in PNG or SVG format.
CSS Resources Free Trianglify.io


cssgr.id – An interactive CSS Grid generator.
CSS Resources Free cssgr.id


Layoutit! – An interactive CSS Grid building tool.
CSS Resources Free Layoutit!


Gradientify – A collection of top gradients with copy and paste CSS code.
CSS Resources Free Gradientify


Check out this article for a huge collection of free web-based CSS tools and generators.

CSS Learning Resources

Learn CSS Grid for free – A set of 14 interactive screencasts to take you from beginner to advanced.
CSS Resources Free Learn CSS Grid for free


CSS Layout cookbook – Access “recipes” for building common layouts.
CSS Layout cookbook


Guidelines for Brutalist Web Design – Implementing brutalist design the right way.
Guidelines for Brutalist Web Design


Accessibility Cheatsheet – A handy checklist for ensuring your designs are accessible to all.
Accessibility Cheatsheet


MODALZ MODALZ MODALZ – A guide for when to use modals (and when not to).
MODALZ MODALZ MODALZ


GRID – A visual cheatsheet for CSS Grid.
GRID


A11Y Style Guide – A living pattern library with an eye towards accessibility.
A11Y Style Guide


The Font Loading Checklist – A list to help you maximize performance and the user experience.
The Font Loading Checklist


What is Modular CSS? – A detailed guide writing CSS at scale.
What is Modular CSS?


Learn Flexbox – Online tool that demonstrates the various properties of CSS Flexbox.
Learn Flexbox


Hot Tips CSS – A curated selection of CSS snippets to enhance your projects.
Hot tips CSS


CSS Cheat Sheet – A well put together reference of CSS properties.
CSS Resources Free CSS Cheat Sheet


Front-End Design Checklist – An exhaustive list of elements to help you ensure quality in design.
CSS Resources Free Front-End Design Checklist


Grid to Flex – CSS Flexbox fallbacks for projects using CSS Grid.
CSS Resources Free Grid to Flex


Component Based Design System With Tachyons – Introduction to a functional CSS framework / design system.
CSS Resources Free Component Based Design System With Tachyons


30 Seconds of CSS – A curated collection of useful CSS snippets you can understand in 30 seconds or less.
CSS Resources Free 30 Seconds of CSS


100 Days CSS Challenge – Create something unique and sharpen your skills.
100 Days CSS Challenge


How CSS works: Understanding the cascade – Learn one of the true fundamentals of CSS for more efficient code.
CSS Resources Free How CSS works: Understanding the cascade


Manageable Utility Systems with CSS Variables – A look at the difference between Sass variables and new CSS variables.
CSS Resources Free Manageable Utility Systems with CSS Variables

Cool CSS Creations

Piano Keyboard – Thanks to this CSS/JS site, you can play piano on your keyboard or mouse.
CSS Resources Free Piano Keyboard


CSS Snake & Ladders – A multi-player game developed with HTML and CSS.
CSS Snake & Ladders


Solar System Explorer in CSS – View this simulation, built without a single bit of JavaScript.
Solar System Explorer in CSS


Pure CSS Francine – A HTML/CSS rendering of an 18th-century oil painting.
CSS Resources Free Pure CSS Francine


Air Bomb – A fun game written with pure CSS (no JS required).
CSS Resources Free Air Bomb

Our CSS Snippets Collections (2018)

More CSS Resources

You might also like to take a look at our previous CSS collections: 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.