adobe stock icon Download 10 Free Photos & Assets From Adobe Stock Download Now

Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019

By
on CSS

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