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.
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.
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 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.
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.
Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.
CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.
Our CSS Snippets Collections
- 10 CSS Animated Underline Text Effects Snippets
- 10 Advanced Image Hover Effects Snippets
- 8 Tip-Top Toggle Switch CSS Snippets
- 10 Character Designs Created Entirely With HTML & CSS
- 10 Incredible Examples of CSS, JS & SVG Logo Design
- 10 Examples of Unorthodox Shapes Created with CSS
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 8 Ways to Make the Search Field Sexy with CSS
- 9 Custom Open Source File Upload Field Snippets
- 10 Snippets for Creating Split Screen Layouts
- 10 Amazing CSS Button Libraries & Collections
- Free Modal Window Libraries & Plugins
More CSS Resources
And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.
- Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020
- Fun Examples of CSS Imitating Print Design
- 8 Common Website Layouts Built with CSS Grid
- 8 Fantastic Pure CSS Border Effect Code Snippets
- 10 Examples of Unorthodox Shapes Created with CSS