Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019


By

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.
xstyled


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


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


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.
Destyle.css


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.
Matter


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


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


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


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


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


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

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.
CSSFX


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


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


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


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.
RFS


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


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.
Fontanello


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.
Flexulator


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.
branded.


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.
Superposition


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.
DropCSS


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.
Mycolorpanda


Amino – A live CSS editor for Google Chrome.
Amino

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.
Flexbox30

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.
CSSBattle

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.


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.