List of resources:

• 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

90 Free CSS resources you will love (Cont...)

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

90 Free CSS resources you will love (Cont...)

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

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

Code Snippets:
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

90 Free CSS resources you will love (Cont...)

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

90 Free CSS resources you will love (Cont...)

CSS generator:

30. Stripes generator https://stripesgenerator.com

31. Gradient generator https://cssgradient.io

32. Pattern generator http://patternify.com

33. Animation generator https://keyframes.app

34. Layout generator

https:/grid.layoutit.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

90 Free CSS resources you will love (Cont...)

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

90 Free CSS resources you will love (Cont...)

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

56.

https://flexbox.malven.co

 

Chrome Extension:

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

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

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

60. Perfect Pixel

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

90 Free CSS resources you will love (Cont...)

60. Colorpick eyedropper

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

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

62. CSS Scan

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

90 Free CSS resources you will love (Cont...)

YouTube:

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

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

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

66. Edureka

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

 67. Red Stapler

https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg

90 Free CSS resources you will love (Cont...)

Animation libraries:

68. Animate.css

https://animate.style

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

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

71. Anim XYZ

https://animxyz.com

72. Animista

https://animista.net

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

 74. Magic

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

90 Free CSS resources you will love (Cont...)

Websites:

75. CSS reference https://cssreference.io

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

77. CSS layouts https://learnlayout.com

78. CSS tutorial

https://csstutorial.net

79. CSS tricks

https://css-tricks.com

Learn by playing:

80. Grid Garden https://cssgridgarden.com

81. Unfold

https://rupl.github.io/unfold

82. Flexbox defense http://flexboxdefense.com

83. CSS Diner

https://flukeout.github.io

84. Flexbox froggy

https://flexboxfroggy.com

90 Free CSS resources you will love (Cont...)

90 Free CSS resources you will love (Cont...)

Templates:

85. Free CSS templates

https://free-css.com/free-css-templates

86. Templates

https://templated.co

87. Tooplate https://tooplate.com/free-templates

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

89. Templatemo https://templatemo.com

90. Start Bootstrap

https://startbootstrap.com