50 Free CSS Resources For Web Developers 2021

Hello everyone! 👋. Today I am sharing 50 free CSS resources that will help you in your career as web developers.

✅ 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/color-picker
8. Radial Gradient
   css-gradient.com
9. COLORS
   clrs.cc
10. Flat UI colors
    flatuicolors.com

✅ AI integrated color picker

1. Khroma
   khroma.co
2. Colormind
   colormind.io
3. Eva Design System
   colors.eva.design
4. AI color generator
   hotpot.ai/color-generator

✅ Document and notes

1. W3 Schools
   w3schools.com/css
2. MDN
   developer.mozilla.org/en-US/docs/Web/CSS
3. DevDocs
   devdocs.io/css
4. Geeks for geeks
   geeksforgeeks.org/css-tutorials
5. Tutorials point
   tutorialspoint.com/tutorial_view.php?cid=cs..

✅ Code Snippets

1. Web tools
   webcode.tools/generators/css
2. Little snippets
   littlesnippets.net
3. Enjoy CSS
   enjoycss.com
4. CSS Tricks
   css-tricks.com/snippets/css
5. CSS Deck
   cssdeck.com
6. W3 How to
   w3schools.com/howto
7. Snipplr
   snipplr.com
8. Stack overflow
   stackoverflow.com/questions/tagged/css
9. Codepen
   codepen.io/collection/DYpwPE
10. Code my UI
    codemyui.com/tag/pure-css

✅ CSS generator

1. Stripes generator
   stripesgenerator.com
2. Gradient generator
   cssgradient.io
3. Pattern generator
   patternify.com
4. Animation generator
   keyframes.app
5. Layout generator
   grid.layoutit.com
6. W3 How To
   w3schools.com/howto
7. CSS Matic
   cssmatic.com
8. Wait ! Animate
   waitanimate.wstone.io
9. ColorZilla Gradients
   colorzilla.com/gradient-editor
10. Patternify
    patternify.com

✅ Design Inspiration

1. CSS design awards
   cssdesignawards.com
2. Awwwards
   awwwards.com/websites/css3
3. CSS nectar
   cssnectar.com
4. Design modo
   designmodo.com/css-website-designs
5. CSS winner
   csswinner.com

✅ GitHub Repo

1. Awesome CSS
   github.com/awesome-css-group/awesome-css
2. 30 seconds of CSS
   github.com/30-seconds/30-seconds-of-css
3. CSS Protips
   github.com/AllThingsSmitty/css-protips
4. Awesome flexbox
   github.com/afonsopacifer/awesome-flexbox
5. Developer Roadmap
   github.com/kamranahmedse/developer-roadmap
6. Awesome-CheatSheets
   github.com/LeCoupa/awesome-cheatsheets

Hope you enjoyed my collection. Feel free to comment your ideas and add more.