Speckyboy Cyber Monday 2022

Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019

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.

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.