100 Free CSS Resources

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.

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

11. Khroma - The AI color tool for designers
12. Colormind - the AI powered color palette generator
13. Eva Design System: Deep learning color generator
14. AI Color Generator - Hotpot.ai

Code Snippets

15. The Ultimate CSS Generator | Web Code Tools
16. LittleSnippets.net - A free collection of CSS3/HTML snippets. New entries crafted and added daily.
17. Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
18. CSS-Tricks - CSS Snippets
19. HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
20. W3Schools How TO - Code snippets for HTML, CSS and JavaScript
21. Code Snippet - Snipplr Social Repository
22. Newest 'css' Questions - Stack Overflow
23. CodePen CSS Snippets by @CaraMiame
24. 453 Pure CSS Only Code Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

Documentation & Notes

25. W3Schools CSS Tutorial
26. CSS: Cascading Style Sheets | MDN
27. DevDocs — CSS documentation
28. CSS Tutorials - GeeksforGeeks
29. CSS Tutorial - Tutorials Point

CSS Generators

30. Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
31. CSS Gradient — Generator, Maker, and Background
32. Patternify | CSS Pattern Generator
33. Keyframes.app | CSS Toolbox
34. Interactive CSS Grid Generator | Layoutit Grid
35. CSS Accordion Slider Generator
36. CSS Grid Layout Generator
37. Fancy Border Radius Generator
38. Neumorphism/Soft UI CSS shadow generator
39. Clippy — CSS clip-path maker
40. Glassmorphism CSS Generator

Design Inspiration

41. CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards
42. Best CSS3 Websites | Web Design Inspiration
43. CSS Gallery for Web Design Inspiration - CSS Nectar
44. Examples of CSS Website Designs for Inspiration - Designmodo
45. CSS Winner - Web Design Awards - CSS Award Gallery for Website Design Inspiration - Website Awards

Helpful GitHub Repos

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

Cheat Sheets

50. iLoveCoding - HTML & CSS Cheatsheet
51. CSS cheatsheet - Devhints
52. CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com
53. GRID: A simple visual cheatsheet for CSS Grid Layout
54. Grid Cheatsheet
55. Flex Cheatsheet
56. FLEX: A simple visual cheatsheet for flexbox
57. Everything You Need to Know about CSS Position

Validators

58. Online CSS Validator - BeautifyTools.com
59. CSS Lint
60. PurifyCSS Online - Remove unused CSS

Chrome Extensions

61. CSS Peeper - Chrome Web Store
62. Pesticide for Chrome with autoupdate - Chrome Web Store
63. Stylebot - Chrome Web Store
64. PerfectPixel by WellDoneCode (pixel perfect) - Chrome Web Store
65. ColorPick Eyedropper - Chrome Web Store
66. CSSViewer - Chrome Web Store
67. CSS Scan - Chrome Web Store

YouTube Videos & Channels

68. CSS Tutorial - Zero to Hero

69. CSS Crash Course For Absolute Beginners

70. Code Artist (channel)
71. CSS Crash Course In One Hour

72. Red Stapler (channel)

Animation Libraries

73. Animate.css | A cross-browser library of CSS animations.
74. Obnoxious.css
75. CSShake
76. AnimXYZ
77. Animista - CSS Animations on Demand
78. Hover.css - A collection of CSS3 powered hover effects
79. Magic Animations CSS3

Twitter Threads

80. Create your first CSS art (twitter thread)

Create your first CSS art✨🎨

A thread 🧵
It contains all resources you need in order to create your first CSS art👇🏻

— Pratham (@Prathkum) September 17, 2020

81. A complete beginner's guide to CSS Grid layout (twitter thread)

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵 pic.twitter.com/e0EvyZWTHS

— Pratham (@Prathkum) March 24, 2021

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

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

A quick start guide to CSS animations 👇🏻

Thread 🧵 pic.twitter.com/LvGcZr7qsD

— Pratham (@Prathkum) March 1, 2021

Website References & Tutorials

84. CSS Reference - A free visual guide to CSS
85. Learn to Code HTML & CSS - Beginner & Advanced
86. Learn CSS Layout
87. CSS Tutorial
88. ⚡️ Tip: Taking breaks along your journey is essential.
89. CSS-Tricks

Learn by Playing

90. Grid Garden - A game for learning CSS grid layout
91. Unfolding the Box Model: Exploring CSS 3D Transforms
92. Flexbox Defense
93. CSS Diner - Where we feast on CSS Selectors!
94. Flexbox Froggy - A game for learning CSS flexbox

Templates

95. Download 3228 Free Website Templates - CSS & HTML | Free CSS
96. ⚡️ Tip: Tech gets out of date quickly. Keep looking for new ways to learn.
97. Free HTML CSS Templates for your websites
98. 8500+ CSS Templates | Free CSS Templates
99. 560+ Free HTML CSS Website Templates by TemplateMo
100. ⚡️ 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.