Update 14/05/2021 : Click for new resources not in this list.
Web development is not an easy task for beginners, to create a web project that standout takes lot of effort, time and vast knowledge in various html elements, CSS properties and JavaScript. I list 200+ resources that will help junior web developers to fill the gaps in knowledge they lack in HTML and CSS. These will definitely help developers to create amazing web projects with less effort and quickly. All the resources listed here are free to use. These resources can be used to understand how CSS works which help to learn CSS quickly. Hope this will help you, Happy Coding.
Resources listed in this post:-
1.CSS Filters
2.Media Query Generators
3.CSS Spinners
4.Font Mixers
5.Box Shadow Generators
6.Meta Tag Generators
7.Favicon Makers
8.Profile Picture Makers
9.Neumorphic Generators
10.Dual Tone Generators
11.Triangle Shape Generators
12.Ribbon / Banner Generators
13.Underline Animation Generators
14.Hamburger Menu Generators
15.HTML Table Generators
16.CSS Button Generators -- Another Related Post
17.Flip Button Generators
18.Checkbox And Radio Button Generators
19.Animation Resources --Another Related Post
20.Icon Resources
21.Color Gradient Generators --Another Related Post
22.Color Palette Generators --Another Related Post
23.SVG Shape Generators --Another Related Post
24.SVG Background Generators --Another Related Post
25.SVG Illustrations Resources --Another Related Post
-------------------------
CSS Filters
The below site help you to generate overlay effect for your images using CSS filter code. You can create overlay by adjusting various parameters like brightness, contrast, grayscale, hue-rotation, opacity, saturation, blur etc. of the overlay. The overlay can contain gradient colors also. The css code for the overlay will also contain browser prefixed codes, so that the overlay will be supported in wide range of browsers.
-------------------------------------------
Media Query Generators
In the current situation the number of different types of devices accessing the web is large and they have different screen layout also. So we cannot use a single layout for all the devices, this cause designing responsiveness for the web project a challenging one. We use media queries to achieve responsiveness. The media queries required for a fluid responsive designing can be complex and time consuming as the number of devices we are targeting get bigger. The below listed resources will help you to generate CSS media query code with ease. They help you to create device specific or general media query quickly, that can be pasted directly into your projects.
-------------------------------------------
CSS Spinner
Free CSS spinners that can be used in your web projects, they can be used as pre loaders also.
-------------------------------------------
Font Generators / Font Mixers
Using different fonts in your web design can make the look of your website better, but if the fonts you use don't compliment each other, it will make the design awful. So it's better to try out various combinations before selecting. These links will help you to play with various fonts, mixing them to create beautiful patters that can make your web project awesome.
Click to expand Font Generators / Mixers Resources
1. Brand Mark
2. Mix Font
3. DJR
4. Threebu
5. Font Joy
-------------------------------------------
Box shadow
Box shadow will help to create a 3D effect for your web components and texts in your web project, to design one which is good for the web project is a time taking one, the below resources will help to generate box shadows quickly and easily, the generated code can be used directly into the style sheet.
Click to expand Box Shadow Generator Resources
1. GetCSSScan
2. CSS3 Studio
3. Enjoy CSS
4. CSSBud
5. Shadows.brumm
-------------------------------------------
Meta Tag Generator
Meta tags are important for SEO, their are a large number of meta tags available we may not know how to configure them. The below links will help you to generate general, important meta tags based on your inputs.
-------------------------------------------
Free Favicon Maker
Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar, the below sites helps you to create favicons.
Click to expand Free Favicon Maker Resources
1. Formito
2. Free Logo Maker text only
3. Favicon.io
4. Favicon-generator
5. Favicon.cc
-------------------------------------------
Profile Picture Maker
Websites that help to create profile pictures.
-------------------------------------------
Neumorphism
Neumorphism is a design trend which is marked by minimal and realistic-looking UI. A few sites that help to generate css code for the neumorphism design is listed below.
-------------------------------------------
Dual Tone Creator
The below links help to create dual tone effect using css.
-------------------------------------------
Triangle generator
These links help to generate triangle shapes using html and css, you can use the shape by simply copying the code to your project.
-------------------------------------------
Ribbon / Banner generator
The links help to generate ribbons and banners.
Click to Expand Ribbon Generator List
1. Badge Generator
2. Doodle Nerd
3. CSS Portal : Ribbon
4. CSS Portal : Ribbon Banner
-------------------------------------------
Underline generators
These links help to generate underlines and animations that can be applied on underlines in CSS.
-------------------------------------------
Hamburger Menu Icons
The below links help to generate beautiful hamburger menus icon.
-------------------------------------------
Table Generator
The links help to create beautiful html tables. The links help to generate both the html code for table and CSS code to style the tables based on your preferences.
-------------------------------------------
Random Generator
-------------------------------------------
Button Generators
The below links will help to design various buttons based on your preferences, these links generate CSS code of your designs, which can be copied into your projects. Various hover effect can also be generated using the links.
Click to Expand CSS Button Resources List
1. GradientButton
2. css3buttongenerator.com
3. bestcssbuttongenerator.com
4. cssbuttoncreator.com
5. cssportal.com
6. Loading.io
7. fromdev.com
8. html-code-generator.com
9. cssgenerators.net
10. buttonoptimizer.com
11. dextronet.com
12. sciweavers.org
-------------------------------------------
Flip Switch
1. cssportal.com
2. proto.io
3. html-code-generator.com
4. Bun
-------------------------------------------
Checkbox Generator
1. Doodle Nerd
2. Bun
-------------------------------------------
Radio Button Generator
1. Doodle Nerd
2. Bun
-------------------------------------------
CSS Animation Resources
The below resources help you to get CSS code to animate various components of your web projects.
Click to Expand Animation Resources List
1.The App Guruz
2. CSS animate
3.Animatelo
4.All Animation CSS3
5.CSShake
6.CSSAnimation
7.Hover.CSS
8.Infinite
9.It's Tuesday
10.Magic
11.Micron
12.Motion UI
13.Obnoxious
14.Reboundgen
15.Rocket
16.Wicked CSS
17.Animista
18.Animate.CSS
19.Keyframes
-------------------------------------------
Icons 💥
The below links provide with mostly free icon resources, which can be used in web projects.
Click to Expand Icon Resources List
1. Feather Icons
2. CSS.gg
3. Jam Icons
4. Line Icons
5. Material Icons
6.Iconmonstr
7. Pixsellz
8. Iconshock
9. Icon8
10. Flaticon
11. Freepik
12. Icon Ninja
13. SVGrepo
14. Captain Icon Web
15. Font Awesome
16. Smplkit
-------------------------------------------
Color Gradient Resources
These links help to generate color gradients, the gradients can be created based on adjusting the controls provided by respective sites. You can create 2 color based or multiple color based gradients using various web sites provided in the list. Some websites also provide with wide range of pre created color gradients that can be copy pasted into your web projects. Click the arrow button section to expand the resources list.
Click to Expand Colour Gradient Resources List
1. Eggradients
2. Colorzilla
3. WebGradients
4. MyColor.space
5. CoolHue
6. GradientHunt
7. UIgradient
8. Grabient
9. Mdigi
10. Coolors
-------------------------------------------
Color Palette Generator
The below links will help to generate color palette, which can make your web project awesome.
Click to Expand Color Palette Resources List
1. ColorsOnTheWeb
2. ColorPalettes
3. ColorHunt
4. 0 To 255
5. Hailpixel
6. Clrs.cc
7. HTMLColorCodes
8. Coolors
9. ColorMind
10. Muzil
11. Canva
12. Mycolor.space
13. AdobeColorWheel
14. Huesnap
15. MaterialPalette
16. ColorExplorer
17. Paletton
18. BrandColor
19. ColorPoint.io
20. Color Mixer
-------------------------------------------
SVG Shape Generator
The below links will help to generate different svg shapes, sites will generate svg code for the shapes you generate, some sites also let you download the design in image format also. Click the arrow button section to expand the resources list.
Click to Expand SVG Shapes Resources List
#### 1. Blob Maker
2. Squircley
3. Softr.io : SVG Shape Generator
4. Blobs
5. Chartgen
6. Outpan : Gradient Wave Generator
7. Wavelry
8. Softr.io : SVG Wave Generator
9. Getwaves.io : Wave Generator
10. SVGwave.in : Wave Generator
11. Haikei : Multiple Shape Generator
12. SVGwaves.io
13. Shape Divider
14. Omatsuri
-------------------------------------------
SVG Background Generators
The links below will help you to generate beautiful backgrounds in svg format. Most of the sites have controls that let you design the backgrounds, generated images can be downloaded in multiple formats.
Click to Expand SVG Background Resources List
1. SVG Backgrounds
2. Hero Patterns
3. Philiprogers: SVGPatterns
4. The Pattern Library
5. Plain Pattern
6. Patternico
7. Paaatterns
8. Cool Background
9. Btmills: Geopattern
10. Bgjar
11. Svgeez
12. Patternpad
13. Tartanify
14. Bg Siteorigin
15. Tabbied
16. Pattern Monster
17. Visiwig
18. Pattern Ninja
19. CSS Background Patterns
20. Patternify
21. Animated CSS Background
22. CSS Stripes Generator
23. Patternizer
24. Doodad: Pattern Generator
-------------------------------------------
Illustration resources
Here I list more than 30+ resources that will help you to get free illustrations for your web projects. Most of these resources provide free contents. Most of the illustrations can me downloaded as SVG format or PNG format, which is better than JPG format, using svg/png format help to increase website performance when compare to one using JPG images. Also svg scale well no need to separate files to create responsiveness. Please click the below arrow to expand the resource list
Click to Expand Illustration Resources List
1. Undraw
2. Draw Kit
3. Indian Doodle
4. Poke
5. open Doodles
6. Lukaszadam
7. IRA Design
8. Mixkit
9. Scale
10. Pulse
11. Gee Me
12. Absurd
13. The Noun project
4. Fresh-folk
15. Rawpixel
16. Webpixels : Eye Pop
17. Delesign
18. Manypixels
19. Icon8
20. Humaans
21. Streamline
22. Lucid
23. Ui8
24. Control.Rocks
25. Niceillustrations
26. Pixel True
27. Isometric
28. Story Set
29. Open Peeps
30. Black illustrations
31. Free Illustrations
32. Illlustrations
33. Getillustrations
Top comments (38)
Very impressive list! I found a couple of tools that I think might be useful to me, but honestly I didn't check all of them. This is too long of a list for one post and I think each category deserves its own post. Not a bad idea to have all resources on one page, but I just hate to scroll that much!
i will divide each section later, some are already available , you can check my profile.
Happy to hear that the post was useful.
Tim Berners-Lee was thinking about people like you when he created the web. It's simply staggering, the number of resources available out there, overwhelming at times, but it's people like you who just make the 'I didn't know what I didn't know' knowns. a lot more accessible. Thank you.
You are welcome, Happy that this post was useful to you.
It is a Wonderful Library for every UI developer. Great effort. Thanks, Chettan.
Also, Add this icons package to the icons library. Nice and clean icons it is free we often use this icon.
iconscout.com/unicons/explore/line
Illustrations also:
iconscout.com/
Appreciate the feedback, will check the links. For that "chettan", Nanni.... thank you
Great post! I will take my time to sort out what I need. I appreciate your efforts compiling this post. ❤️👍🔥
thank you
Fantastic collection. Found it extremely useful. You may want to check out 3D Bay
Its a collection of royalty-free 3D illustrations that are free for commercial use. Do consider adding it to your lists. Would be very helpful for devs and creatives.
Hi there, I've created a color palette tool called Colors UI (colorsui.com). Please check this out.
Sure...
Very usefull, thank you
You are welcome
This is very awesome. Thanks for taking the time to write. Very valuable. Definitely using a lot of it.
You are welcome, happy to hear the good words
I enjoyed looking through this long list of useful resources for anyone, not just beginners. Thanks for sharing!
Thank you, for the kind words
Really helpful, thanks for sharing . I'll save a lot of time 🙂
You are welcome
Some comments may only be visible to logged-in visitors. Sign in to view all comments.