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
   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://www.webfx.com/web-design/color-picker

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

9. COLORS
   https://clrs.cc

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

AI integrated color picker

1. Khroma
   http://khroma.co

2. Colormind
   http://colormind.io

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

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

Document and notes

1. W3 Schools
   https://www.w3schools.com/css

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

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

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

5. Tutorials point
   https://www.tutorialspoint.com/tutorial_view.php?cid=css&pid=index.htm

Code Snippets

1. Web tools
   https://webcode.tools/generators/css

2. Little snippets
   https://littlesnippets.net

3. Enjoy CSS
   https://enjoycss.com

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

5. CSS Deck
   https://cssdeck.com

6. W3 How to
   https://www.w3schools.com/howto

7. Snipplr
   https://snipplr.com

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

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

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

CSS generator

1. Stripes generator
   https://stripesgenerator.com

2. Gradient generator
   https://cssgradient.io

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

4. Animation generator
   https://keyframes.app

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

6. W3 How To
   https://www.w3schools.com/howto/

7. CSS Matic
   https://www.cssmatic.com/

8. Wait ! Animate
   https://waitanimate.wstone.io/

9. ColorZilla Gradients
   https://www.colorzilla.com/gradient-editor/

10. Patternify
    http://www.patternify.com/

Design Inspiration

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

2. Awwwards
   https://www.awwwards.com/websites/css3

3. CSS nectar
   https://cssnectar.com

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

5. CSS winner
   https://csswinner.com

GitHub Repo

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

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

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

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

5. Developer Roadmap
   https://github.com/kamranahmedse/developer-roadmap

6. Awesome-CheatSheets
   https://github.com/LeCoupa/awesome-cheatsheets

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