Skip to main content

Command Palette

Search for a command to run...

50 Free CSS Resources For Web Developers 2021

Published
2 min read
50 Free CSS Resources For Web Developers 2021
S

I'm a full stack javascript developer based on Sri Lanka. My passion is to develop responsive web and mobile applications using MERN stack. Currently I'm working as a mobile frontend developer. Love to share what I learned and my thoughts through blog posts.

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

lets do it.gif

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.

More from this blog

Sakun Pushpitha's Blog

5 posts

I'm a full stack javascript developer based on Sri Lanka. Passion is to develop responsive web and mobile applications using MERN stack. Currently I'm working as a mobile frontend developer.