Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019


Quick Jump: CSS Frameworks, CSS Libraries, CSS Animation, CSS Typography, CSS Tools & Generators and CSS Inspiration.

CSS Frameworks

Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you.
Terminal CSS

xstyled – A consistent theme-based CSS for styled-components.

Fomantic-UI – A free, “human-friendly” development framework for creating responsive websites.

Raster – A simple CSS Grid system that utilizes descriptive HTML.

Diez – A free, open-source design language framework.
Example from Diez

Butter Cake – Check out this modern, lightweight CSS framework.
Butter Cake

CSS Libraries

Destyle.css – An “opinionated” CSS reset library.

Immutable Styles – A library for styling web interfaces with a focus on predictability and robustness.
Immutable Styles

Matter – A collection of Material Design components in pure CSS.

Water.css – Simple styles and semantic code for your static website.

Flexbox Case Studies – Tutorials to help you achieve common Flexbox layouts.
Flexbox Case Studies

IsometricSass – A Sass library for creating isometric 2D without JavaScript.

css-fx-layout – A lightweight CSS Flexbox library that includes both classes and HTML data attributes.

a11y-css-reset – A set of global CSS rules to help improve the accessibility of your projects.

augmented-ui – A tool for creating “futuristic, cyberpunk-inspired UI” with CSS.

CSS Animation

CSS Wand – Copy, paste and customize a variety of useful animation styles.
CSS Wand

CSSFX – A collection of animated CSS buttons, hover effects, inputs and loaders for use in your projects.

CSSeffectsSnippets. – A collection of handy CSS animations that you can copy and paste.

useAnimations – A free CSS library of icon-based microinteractions.

extra.css – Use this CSS Houdini library to add stunning effects.

Izmir ImageHover CSS Library – A mini CSS library built by Ciaran Walsh for quickly creating beautifully animated image hover elements.
Izmir ImageHover CSS Library

CSS Animo – A collection of copy & paste CSS animation effects.
CSS Animo

CSS Typography

CSSans Pro – A free colorful and sassy font.
CSSans Pro

RFS – A responsive font size engine that automatically calculates sizing based on browser viewport.

Typetura – A tool for fluid typesetting, based on screen size.

Interactive Typography Cheatsheet – A fun tool for learning the various components of a letterform.
Interactive Typography Cheatsheet

TypeSafe CSS – A tiny (under 1KB) responsive CSS framework with a focus on reading and writing.
TypeSafe CSS

Fontsmith Variable Fonts – Learn about this much-hyped development in typography – complete with examples.
Fontsmith Variable Fonts

Font style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.
Font style matcher

Fontanello – A browser extension that displays typographic styles via right-click.

GooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items.
Example from GooFonts

CSS Tools & Generators

Flexulator – An interactive CSS Flexbox space distribution calculator.

CSS Grid Layout Generator – Create complex grids with this visual tool.
CSS Grid Layout Generator

branded. – A free tool for creating and maintaining style guides.

CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.
CSS Grid Generator

Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.
Screen Size Map

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.
Example from Animated CSS Background Generator

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

Gradient Generator – Take two colors and create a variety of custom CSS gradients.
Gradient Generator

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

Amino – A live CSS editor for Google Chrome.

CSS Learning Guides & Cheatsheets

CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.
CSS Selectors Cheatsheet

Relearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.
Relearn CSS layout

CSS Guidelines – A detailed document to help you write more scalable and manageable CSS.
CSS Guidelines

The Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.
The Complete Guide To SCSS/SASS

CSS Layout – A collection of popular CSS layouts and patterns.
Example from CSS Layout

Flexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

CSS Inspiration

Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.
Example from Print to CSS

And, finally…

CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.

Our CSS Snippets Collections

More CSS Resources

You might also like to take a look at our previous CSS collections: 2018, 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.

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.