Home
Home
CSS

100 Free CSS Resources

Pratham

There are countless ways to learn CSS. Here are 100 resources in various categories to get you started.

There are a lot of great resources out there to help you write CSS and make your site shine. I've pulled 100 of my favorites together to share with you.

info

This is a long list! Things are always changing on the web. As resources become out of date, I've replaced them with helpful tips to boost your learning alongside these great resources.

Colors

  1. Color Hunt
  2. Coolors
  3. HTML Color Codes
  4. uiGradients
  5. CSS Gradient
  6. Encycolorpedia
  7. Color Picker by WebFX
  8. CSS Gradient Generator
  9. Colors
  10. Flat UI Colors 2

AI-Integrated Color Picker

  1. Khroma - The AI color tool for designers
  2. Colormind - the AI powered color palette generator
  3. Eva Design System: Deep learning color generator
  4. AI Color Generator - Hotpot.ai

Code Snippets

  1. The Ultimate CSS Generator | Web Code Tools
  2. LittleSnippets.net - A free collection of CSS3/HTML snippets. New entries crafted and added daily.
  3. Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
  4. CSS-Tricks - CSS Snippets
  5. HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
  6. W3Schools How TO - Code snippets for HTML, CSS and JavaScript
  7. Code Snippet - Snipplr Social Repository
  8. Newest 'css' Questions - Stack Overflow
  9. CodePen CSS Snippets by @CaraMiame
  10. 453 Pure CSS Only Code Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

Documentation & Notes

  1. W3Schools CSS Tutorial
  2. CSS: Cascading Style Sheets | MDN
  3. DevDocs — CSS documentation
  4. CSS Tutorials - GeeksforGeeks
  5. CSS Tutorial - Tutorials Point

CSS Generators

  1. Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
  2. CSS Gradient — Generator, Maker, and Background
  3. Patternify | CSS Pattern Generator
  4. Keyframes.app | CSS Toolbox
  5. Interactive CSS Grid Generator | Layoutit Grid
  6. CSS Accordion Slider Generator
  7. CSS Grid Layout Generator
  8. Fancy Border Radius Generator
  9. Neumorphism/Soft UI CSS shadow generator
  10. Clippy — CSS clip-path maker
  11. Glassmorphism CSS Generator

Design Inspiration

  1. CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards
  2. Best CSS3 Websites | Web Design Inspiration
  3. CSS Gallery for Web Design Inspiration - CSS Nectar
  4. Examples of CSS Website Designs for Inspiration - Designmodo
  5. CSS Winner - Web Design Awards - CSS Award Gallery for Website Design Inspiration - Website Awards

Helpful GitHub Repos

  1. GitHub - awesome-css-group/awesome-css: A curated contents of amazing CSS :)
  2. GitHub - 30-seconds/30-seconds-of-css: Short CSS code snippets for all your development needs
  3. GitHub - AllThingsSmitty/css-protips: A collection of tips to help take your CSS skills pro
  4. GitHub - afonsopacifer/awesome-flexbox: A curated list of CSS Flexible Box Layout Module or only Flexbox.

Cheat Sheets

  1. iLoveCoding - HTML & CSS Cheatsheet
  2. CSS cheatsheet - Devhints
  3. CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
  4. GRID: A simple visual cheatsheet for CSS Grid Layout
  5. Grid Cheatsheet
  6. Flex Cheatsheet
  7. FLEX: A simple visual cheatsheet for flexbox
  8. Everything You Need to Know about CSS Position

Validators

  1. Online CSS Validator - BeautifyTools.com
  2. CSS Lint
  3. PurifyCSS Online - Remove unused CSS

Chrome Extensions

  1. CSS Peeper - Chrome Web Store
  2. Pesticide for Chrome with autoupdate - Chrome Web Store
  3. Stylebot - Chrome Web Store
  4. PerfectPixel by WellDoneCode (pixel perfect) - Chrome Web Store
  5. ColorPick Eyedropper - Chrome Web Store
  6. CSSViewer - Chrome Web Store
  7. CSS Scan - Chrome Web Store

YouTube Videos & Channels

  1. CSS Tutorial - Zero to Hero
  1. CSS Crash Course For Absolute Beginners
  1. Code Artist (channel)
  2. CSS Crash Course In One Hour
  1. Red Stapler (channel)

Animation Libraries

  1. Animate.css | A cross-browser library of CSS animations.
  2. Obnoxious.css
  3. CSShake
  4. AnimXYZ
  5. Animista - CSS Animations on Demand
  6. Hover.css - A collection of CSS3 powered hover effects
  7. Magic Animations CSS3

Twitter Threads

  1. Create your first CSS art (twitter thread)
  1. A complete beginner's guide to CSS Grid layout (twitter thread)

  1. ⚡️ Tip: Twitter can be an excellent resource for learning. Find the right people to follow.

  2. A quick start guide to CSS animations (twitter thread)

Website References & Tutorials

  1. CSS Reference - A free visual guide to CSS
  2. Learn to Code HTML & CSS - Beginner & Advanced
  3. Learn CSS Layout
  4. CSS Tutorial
  5. ⚡️ Tip: Taking breaks along your journey is essential.
  6. CSS-Tricks

Learn by Playing

  1. Grid Garden - A game for learning CSS grid layout
  2. Unfolding the Box Model: Exploring CSS 3D Transforms
  3. Flexbox Defense
  4. CSS Diner - Where we feast on CSS Selectors!
  5. Flexbox Froggy - A game for learning CSS flexbox

Templates

  1. Download 3228 Free Website Templates - CSS & HTML | Free CSS
  2. ⚡️ Tip: Tech gets out of date quickly. Keep looking for new ways to learn.
  3. Free HTML CSS Templates for your websites
  4. 8500+ CSS Templates | Free CSS Templates
  5. 560+ Free HTML CSS Website Templates by TemplateMo
  6. ⚡️ Fill in the blank. Go create something great with CSS. Then share it with the world.

That's it! If this list of resources was helpful to you, share this post and send some love to the original tweet.

Let's Connect

Keep Reading

CSS

Everything You Need to Know about CSS Position Property

Dive deep into CSS position with real examples.

Pratham Aug 19, 2021
CSS

A Beginner's Guide to Z-Index

The z-index is a powerful yet confusing concept of CSS. Let's make it easy!

Pratham Jun 04, 2021
CSS

CSS Animations Quick Start Guide

Learn the basics of CSS animations to catch the attention of your website visitors.

Pratham Jun 24, 2021