100 Free CSS resources you will love🎨

Mega Thread 🧵👇🏻

◽ Colors
◽ AI integrated color picker
◽ Code Snippets
◽ Document and notes
◽ CSS generator
◽ Design Inspiration
◽ GitHub Repo
◽ Cheat Sheets
◽ Validators
◽ Chrome Extension
◽ YouTube
◽ Animation Libraries
◽ Threads
◽ Website
◽ Learn by playing
◽ Templates

🔹 Colors

1. Color Hunt
https://colorhunt.co

2. Coolors
https://coolors.co

3. HTML color codes
https://htmlcolorcodes.com

4. UI Gradients
https://uigradients.com/

5. Gradient generator
https://cssgradient.io/

6. Encycolorpedia
https://encycolorpedia.com

7. WebFx
https://webfx.com/web-design/color-picker/

8. Radial Gradient
https://css-gradient.com

9. COLORS
https://clrs.cc

10. Flat UI colors 2
https://flatuicolors.com/

🔹 AI integrated color picker

11. Khroma
http://khroma.co/

12. Colormind
http://khroma.co/

13. Eva Design System
https://colors.eva.design/

14. AI color generator
https://hotpot.ai/color-generator

🔹 Code Snippets

15. Web tools
https://webcode.tools/css-generator

16. Little snippets
https://littlesnippets.net

17. Enjoy CSS
https://enjoycss.com

18. CSS Tricks
https://css-tricks.com/snippets/css/

19. CSS Deck
https://cssdeck.com

20. W3 How to
https://w3schools.com/howto/

21. Snipplr
https://snipplr.com

22. Stack overflow
https://stackoverflow.com/questions/tagged/css

23. Codepen
https://codepen.io/collection/DYpwPE

24. Code my UI
https://codemyui.com/tag/pure-css/

🔹 Document and notes

25. W3 Schools
https://w3schools.com/css/

26. MDN
https://developer.mozilla.org/en-US/docs/Web/CSS

27. DevDocs
https://devdocs.io/css/

28. Geeks for geeks
https://geeksforgeeks.org/css-tutorials/

29. Tutorials point
https://tutorialspoint.com/css/index.htm

🔹 CSS generator

30. Stripes generator
https://stripesgenerator.com/

31. Gradient generator
https://cssgradient.io/

32. Pattern generator
http://www.patternify.com/

33. Animation generator
https://keyframes.app/

34. Layout generator
https://grid.layoutit.com/

35. CSS Accordion Slider Generator
https://accordionslider.com/

36. Grid Layout generator
https://css-grid-layout-generator.pw/

37. Border radius
https://9elements.github.io/fancy-border-radius/

38. Neumorphism
https://neumorphism.io/

39. Shape maker
https://bennettfeely.com/clippy

40. Glassmorphism
https://glassmorphism.com

🔹 Design Inspiration

41. CSS design awards
https://cssdesignawards.com

42. Awwwards
https://awwwards.com/websites/css3/

43. CSS nectar
https://cssnectar.com

44. Design modo
https://designmodo.com/css-website-designs/

45. CSS winner
https://csswinner.com

🔹 GitHub Repo

46. Awesome CSS
https://github.com/awesome-css-group/awesome-css

47. 30 seconds of CSS
https://github.com/30-seconds/30-seconds-of-css

48. CSS Protips
https://github.com/AllThingsSmitty/css-protips

49. Awesome flexbox
https://github.com/afonsopacifer/awesome-flexbox

🔹 Cheat Sheets

50. I love Coding
https://ilovecoding.org/blog/htmlcss-cheatsheet

51. Dev Hints
https://devhints.io/css

52. https://htmlcheatsheet.com/css/

53. Grid
https://grid.malven.co/

54. CSS Grid
https://yoksel.github.io/grid-cheatsheet/

55. Flex cheat sheet
https://yoksel.github.io/flex-cheatsheet/

56. https://flexbox.malven.co/

57. Position

photo

🔹 Validators

58. CSS Validators
http://beautifytools.com/css-validator.php

59. CSS Lint
http://csslint.net

60. Purify CSS
https://purifycss.online/

🔹 Chrome Extension

61. CSS Peeper
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en

62. Pesticide
https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi?hl=en

63. Stylebot
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

64. Perfect Pixel
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

65. Colorpick eyedropper
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

66. CSS viewer
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en

67. CSS Scan
https://chrome.google.com/webstore/detail/css-scan/gieabiemggnpnminflinemaickipbebg?hl=en

🔹 YouTube

68. Free code camp
https://youtube.com/watch?v=1Rs2ND1ryYc

69. Traversy media
https://youtube.com/watch?v=yfoY53QXEnI

70. Coding artist
https://youtube.com/channel/UC15exV5s79D_aYGADudlwpQ

71. Edureka
https://youtube.com/watch?v=3_9znKVNe5g

72. Red Stapler
https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg

🔹 Animation libraries

73. Animate.css
https://animate.style/

74. OBNOXIOUS.css
https://tholman.com/obnoxious/

75. CSShake
http://elrumordelaluz.github.io/csshake/

76. Anim XYZ
https://animxyz.com/

77. Animista
https://animista.net/

78. Hover.CSS
http://ianlunn.github.io/Hover/

79. Magic
https://www.minimamente.com/project/magic/

🔹 Threads

80. CSS arts
81. Grid
82. Flex
83. CSS Animations


🔹 Websites

84. CSS reference
https://cssreference.io/

85. Learn to code
https://learn.shayhowe.com/

86. CSS layouts
https://learnlayout.com/

87. CSS tutorial
https://www.csstutorial.net/

89. CSS tricks
https://css-tricks.com/

🔹 Learn by playing

90. Grid Garden
https://cssgridgarden.com/

91. Unfold
https://rupl.github.io/unfold/

92. Flexbox defense
http://www.flexboxdefense.com/

93. CSS Diner
https://flukeout.github.io/

94. Flexbox froggy
https://flexboxfroggy.com/

🔹 Templates

95. Free CSS templates
https://www.free-css.com/free-css-templates

96. Templates
https://templated.co/

97. Tooplate
https://www.tooplate.com/free-templates

98. Nice page
https://nicepage.com/css-templates

99. Templatemo
https://templatemo.com/

100. Add one take this thread to 100😉

It took me 2 hours to thread all these resources😅
Share it with your connections ❤️