Thread by @Prathkum

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
colorhunt.co

2. Coolors
coolors.co

3. HTML color codes
htmlcolorcodes.com

4. UI Gradients
uigradients.com

5. Gradient generator
cssgradient.io

6. Encycolorpedia
encycolorpedia.com

7. WebFx
webfx.com/web-design/col…

8. Radial Gradient
css-gradient.com

9. COLORS
clrs.cc

10. Flat UI colors 2
flatuicolors.com

🔹 AI integrated color picker

11. Khroma
khroma.co

12. Colormind
khroma.co

13. Eva Design System
colors.eva.design

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

🔹 Code Snippets

15. Web tools
webcode.tools/css-generator

16. Little snippets
littlesnippets.net

17. Enjoy CSS
enjoycss.com

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

19. CSS Deck
cssdeck.com

20. W3 How to
w3schools.com/howto/

21. Snipplr
snipplr.com

22. Stack overflow
stackoverflow.com/questions/tagg…

23. Codepen
codepen.io/collection/DYp…

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

🔹 Document and notes

25. W3 Schools
w3schools.com/css/

26. MDN
developer.mozilla.org/en-US/docs/Web…

27. DevDocs
devdocs.io/css/

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

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

🔹 CSS generator

30. Stripes generator
stripesgenerator.com

31. Gradient generator
cssgradient.io

32. Pattern generator
patternify.com

33. Animation generator
keyframes.app

34. Layout generator
grid.layoutit.com

35. CSS Accordion Slider Generator
accordionslider.com

36. Grid Layout generator
css-grid-layout-generator.pw

37. Border radius
9elements.github.io/fancy-border-r…

38. Neumorphism
neumorphism.io

39. Shape maker
bennettfeely.com/clippy

40. Glassmorphism
glassmorphism.com

🔹 Design Inspiration

41. CSS design awards
cssdesignawards.com

42. Awwwards
awwwards.com/websites/css3/

43. CSS nectar
cssnectar.com

44. Design modo
designmodo.com/css-website-de…

45. CSS winner
csswinner.com

🔹 GitHub Repo

46. Awesome CSS
github.com/awesome-css-gr…

47. 30 seconds of CSS
github.com/30-seconds/30-…

48. CSS Protips
github.com/AllThingsSmitt…

49. Awesome flexbox
github.com/afonsopacifer/…

🔹 Cheat Sheets

50. I love Coding
ilovecoding.org/blog/htmlcss-c…

51. Dev Hints
devhints.io/css

52. htmlcheatsheet.com/css/

53. Grid
grid.malven.co

54. CSS Grid
yoksel.github.io/grid-cheatshee…

55. Flex cheat sheet
yoksel.github.io/flex-cheatshee…

56. flexbox.malven.co

57. Position

🔹 Validators

58. CSS Validators
beautifytools.com/css-validator.…

59. CSS Lint
csslint.net

60. Purify CSS
purifycss.online

🔹 Chrome Extension

61. CSS Peeper
chrome.google.com/webstore/detai…

62. Pesticide
chrome.google.com/webstore/detai…

63. Stylebot
chrome.google.com/webstore/detai…

64. Perfect Pixel
chrome.google.com/webstore/detai…

65. Colorpick eyedropper
chrome.google.com/webstore/detai…

66. CSS viewer
chrome.google.com/webstore/detai…

67. CSS Scan
chrome.google.com/webstore/detai…

🔹 YouTube

68. Free code camp


69. Traversy media


70. Coding artist
youtube.com/channel/UC15ex…

71. Edureka


72. Red Stapler
youtube.com/channel/UCRthR…

🔹 Animation libraries

73. Animate.css
animate.style

74. OBNOXIOUS.css
tholman.com/obnoxious/

75. CSShake
elrumordelaluz.github.io/csshake/

76. Anim XYZ
animxyz.com

77. Animista
animista.net

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

79. Magic
minimamente.com/project/magic/

🔹 Threads

80. CSS arts

https://twitter.com/Prathkum/status/1306555442298908672?s=20

81. Grid

https://twitter.com/Prathkum/status/1374652212928987137?s=20

82. Flex

https://twitter.com/Prathkum/status/1361931227830358018?s=20

83. CSS Animations

https://twitter.com/Prathkum/status/1366278875467153413?s=20

🔹 Websites

84. CSS reference
cssreference.io

85. Learn to code
learn.shayhowe.com

86. CSS layouts
learnlayout.com

87. CSS tutorial
csstutorial.net

89. CSS tricks
css-tricks.com

🔹 Learn by playing

90. Grid Garden
cssgridgarden.com

91. Unfold
rupl.github.io/unfold/

92. Flexbox defense
flexboxdefense.com

93. CSS Diner
flukeout.github.io

94. Flexbox froggy
flexboxfroggy.com

🔹 Templates

95. Free CSS templates
free-css.com/free-css-templ…

96. Templates
templated.co

97. Tooplate
tooplate.com/free-templates

98. Nice page
nicepage.com/css-templates

99. Templatemo
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 ❤️

While writing this thread I was expecting around 3.5 - 4K likes.This is the largest resource thread ever shared on Twitter

Can we take it there? 😬