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.

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.

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

CSS Libraries

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

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

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.

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.

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.

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

CSS Typography

CSSans Pro – A free colorful and sassy font.

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.

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

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

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

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.

CSS Tools & Generators

Flexulator – An interactive CSS Flexbox space distribution calculator.

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

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

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

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.

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

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.

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.

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

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

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

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

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.

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.