Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020

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 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!

Quick Jump: CSS Libraries, CSS Frameworks, Web-Based CSS Tools & Generators, Useful CSS Cheatsheets, Useful CSS Items.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.
Example from filters.css

Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.
Example from Seasonal.css

Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.
Example from Checka11y.css

Knopf.css – A modern, modular, extensible CSS button system.
Example from Knopf.css

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.
Example from grxdients

LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.
Example from LaTeX.css

CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.
Example from CUBE CSS

pattern.css – A CSS-only library for adding background patterns to your projects.
Example from pattern.css

98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.
Example from 98.css

Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.
Example from Cooltipz.css

MVP.css – A minimalist stylesheet for HTML elements.
Example of MVP.css

MoreToggles.css – A pure CSS library that provides you with stylish toggles.
Example from MoreToggles.css

Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.
Example from Fluiditype

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.
Example of Cirrus.CSS

OrbitCSS – Check out this modern CSS framework based on flexbox.
Example from OrbitCSS

Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.
Example from Halfmoon

mono/color – A small, responsive, dual-themed CSS-only framework.
Example from mono/color

new.css – A classless CSS framework for building HTML-only websites.
Example from new.css

Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.
Example of Honeycomb

Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.
Example from Shorthand

Griddle – A modern CSS framework built with CSS Grid and Flexbox.
Example from Griddle

Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.
Example from The good line-height

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.
Example from CSS Spider

Layoutit Grid – Build your ideal CSS Grid with this online tool.
Example from Layoutit Grid

Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.
Example from Beautiful CSS box-shadow examples

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.
Example from zerodivs.com

CSS Effects – A collection of click-to-copy CSS special effects.
Example from Css Effects

Capsize – An online tool for defining typography in CSS.
Example from Capsize

CSS Background Patterns – Generate your own seamless background pattern.
Example from CSS Background Patterns

Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.
Example from Animated CSS Background Generator

Keyframes.app – Generate awesome CSS animations with this web-based tool.
Example from Keyframes.app

Gradihunt – Find or generate the perfect CSS gradient for your projects.
Example from Gradihunt

CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.
Example of CSS Section Separator Generator

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.
Example from Parametric Color Mixer

Neumorphism.io – A tool for creating Soft-UI CSS code.
Example from Neumorphism.io

700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.
Example from 700+ CSS Icons

Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.
Example of Indie Icons

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.
Example from Grid Cheatsheet

BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.
Example of BEM Cheat Sheet

A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.
Example from A list of 300+ CSS properties

Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.
Example from Visualizing CSS Resets

Selectors Explained – Translate CSS selectors into plain English.
Example from Selectors Explained

Useful CSS Items

What Does 100% Mean in CSS?

CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.
Example from CSS breakpoints used by popular CSS frameworks

Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.
Example of Learn Z-Index Using a Visualization Tool