With all of the changes and rapid advancements CSS has gone through over the last few years, we should not be surprised at the vast volume of open-source resources and tools that are continually being released.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something interesting!

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

The Web Designer Toolbox

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

CSS Frameworks

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

Terminal CSSxstyled – A consistent theme-based CSS for styled-components.

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

Fomantic-UIRaster – A simple CSS Grid system that utilizes descriptive HTML.

RasterDiez – A free, open-source design language framework.

Example from DiezButter Cake – Check out this modern, lightweight CSS framework.

Butter CakeCSS Libraries

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

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

Immutable StylesMatter – A collection of Material Design components in pure CSS.

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

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

Flexbox Case StudiesIsometricSass – A Sass library for creating isometric 2D without JavaScript.

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

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

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

augmented-uiCSS Animation

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

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

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

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

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

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

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

CSS AnimoCSS Typography

CSSans Pro – A free colorful and sassy font.

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

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

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

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

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

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

Font style matcherFontanello – A browser extension that displays typographic styles via right-click.

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

Example from GooFontsFlexulator – An interactive CSS Flexbox space distribution calculator.

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

CSS Grid Layout Generatorbranded. – 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 GeneratorSuperposition – An app that extracts the design tokens from your website for use in your favorite design tool.

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

Screen Size MapAnimated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

Example from Animated CSS Background GeneratorDropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

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

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

MycolorpandaAmino – A live CSS editor for Google Chrome.

AminoCSS Learning Guides & Cheatsheets

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

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

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

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

The Complete Guide To SCSS/SASSCSS Layout – A collection of popular CSS layouts and patterns.

Example from CSS LayoutFlexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

Flexbox30CSS Inspiration

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *