The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources
Tags: css, javascript, webdev, beginners
Published: 2021-05-06 19:59:31

Update 14/05/2021 : [Click] (https://dev.to/kiranrajvjd/75-awesome-web-resources-that-make-web-development-easy-2pff) 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](https://dev.to/kiranrajvjd/15-awesome-css-button-generator-websites-17hj)
### 17.Flip Button Generators
### 18.Checkbox And Radio Button Generators
### 19.Animation Resources --[Another Related Post](https://dev.to/kiranrajvjd/15-awesome-css-animation-resources-4mhi)
### 20.Icon Resources
### 21.Color Gradient Generators --[Another Related Post](https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8)
### 22.Color Palette Generators --[Another Related Post](https://dev.to/kiranrajvjd/15-awesome-color-resources-for-your-next-web-project-48je)
### 23.SVG Shape Generators --[Another Related Post](https://dev.to/kiranrajvjd/10-awesome-svg-shape-generators-for-your-web-projects-2mob)
### 24.SVG Background Generators --[Another Related Post](https://dev.to/kiranrajvjd/the-ultimate-css-background-pattern-resource-20m8)
### 25.SVG Illustrations Resources --[Another Related Post](https://dev.to/kiranrajvjd/awesome-35-svg-resources-for-your-next-web-project-5c15)
#
#-------------------------
## 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.
{% collapsible Click to expand CSS Filter Resources %}  
#### 1. [CSS Filters](https://www.cssfilters.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqlxn0ugoh9gr8cdnf5x.PNG)
#### 2. [CSS Filter Generator](https://www.cssfiltergenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lr2myinsb8n7bpx3bcg.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.  
{% collapsible Click to expand Media Query Generator Resources %}  
#### 1. [Simple CSS](https://simplecss.eu/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvyslt1g3jybr91mm42l.PNG)
#### 2. [Giona](http://giona.net/tools/css3-mediaquery-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyd1aw90nb0cpke64bcx.PNG)
#### 3. [Tools51](http://tools51.nasqueron.org/css/media-queries-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k806s720udp120sya0s.PNG)
{% endcollapsible %}


#-------------------------------------------

## CSS Spinner
Free CSS spinners that can be used in your web projects, they can be used as pre loaders also.
{% collapsible Click to expand CSS Spinner Resources %}
#### 1.[Loading.io](https://loading.io/spinner/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j06twllkcwff89luwhcp.png)
#### 2.[Tobiashlin](https://tobiasahlin.com/spinkit/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyp7omgtqi84sw48helr.png)
#### 3.[Icons8.com](https://icons8.com/cssload/en/spinners)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3umvfe4dnze7z5nb6g0m.png)  
{% endcollapsible %}


#-------------------------------------------

## 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.
{% collapsible Click to expand Font Generators / Mixers Resources %}  
#### 1. [Brand Mark](https://brandmark.io/font-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no6ia8vs5h2tba3i5r25.PNG)
#### 2. [Mix Font](https://www.mixfont.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coulkjvlcjwl1wz6dmvk.PNG)
#### 3. [DJR](https://djr.com/bungee/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw1e0co715t2000jgrh9.PNG)
#### 4. [Threebu](https://www.threebu.it/random-material-palette/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4y6ai7ajuum6oeezj3n.PNG)
#### 5. [Font Joy](https://fontjoy.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqztucg31on3kdsufn15.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.
{% collapsible Click to expand Box Shadow Generator Resources  %}  
#### 1. [GetCSSScan](https://getcssscan.com/css-box-shadow-examples)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20zcnlg0y8t6jr07zuds.png)
#### 2. [CSS3 Studio](http://css3studio.com/page-css3/css-box-shadow.php)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw7e5tx2qwuaw6vaecxq.PNG)
#### 3. [Enjoy CSS](https://enjoycss.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce8gdwc65xor7w6msb37.PNG)
#### 4. [CSSBud](https://cssbud.com/css-generator/css-box-shadow-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr5r1c7hu826hqvf0j5p.PNG)
#### 5. [Shadows.brumm](https://shadows.brumm.af/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly3z8afg4kl142lchdoj.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.
{% collapsible Click to expand Meta Tag Generator Resources %}
#### 1. [Meta Tag Generator](https://webcode.tools/generators/meta-tags)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iek3m4qar5r89ehjurqb.PNG)
#### 2. [SEOptimer](https://www.seoptimer.com/meta-tag-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pegiwk76vgojqkzohpq1.PNG)
#### 3. [Hall Analysis](https://hallanalysis.com/seo-meta-tag-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rosllkbveendzi9t69q6.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.
{% collapsible Click to expand Free Favicon Maker Resources %} 
#### 1. [Formito](https://formito.com/tools/favicon)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c72p7lbuffikd8ensx24.PNG)
#### 2. [Free Logo Maker](https://formito.com/tools/logo) text only
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04icri7a32iwow2x2y4t.PNG)
#### 3. [Favicon.io](https://favicon.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaot3665nvgyfr3ylqjl.PNG)
#### 4. [Favicon-generator](https://www.favicon-generator.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqqlu42b3m9ywk5v8l8u.PNG)
#### 5. [Favicon.cc](https://www.favicon.cc/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkuoz1z9ynv2s9ad32fx.PNG)
{% endcollapsible %}


#-------------------------------------------

## Profile Picture Maker
Websites that help to create profile pictures.
{% collapsible Click to expand Profile Picture Maker Resources %}
#### 1. [Pfpmaker](https://pfpmaker.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh04pucqv8v81bpbsq93.png)
2. [Profile Picture maker](https://profilepicturemaker.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjefn2sbcnnobghckqys.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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. 
{% collapsible Click to expand Neumorphic Generator resources %}
#### 1. [Neumorphism](https://neumorphism.io/#e0e0e0)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6le1i5s1plmc2ygspif.PNG)
#### 2. [Neumorphic](https://neumorphic.design)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4q7t28auxpbo4q6xc6x.PNG)
{% endcollapsible %}


#-------------------------------------------

## Dual Tone Creator
The below links help to create dual tone effect using css.
{% collapsible Click to Expand Dual Tone Generator List %}  
#### 1. [CSS Duotones.com](https://cssduotone.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqvs3np4afg8y68g9a9v.PNG)
#### 2. [Medialoot](https://medialoot.com/duotones/)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04x8xp8fp9yedkda7p97.PNG)
#### 3. [DuoTone: ShapeFactory](https://duotone.shapefactory.co/?f=26b7a0&t=3d3f4c&q=_)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb0x26oamjg2a15d50d4.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.
{% collapsible Click to Expand Triangle Generator List %} 
#### 1. [Omatsuri](https://omatsuri.app/triangle-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03h6awqcmq7a6dwsp2hw.PNG)
#### 2 .[CSS triangle generator](http://apps.eky.hk/css-triangle-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx2xmf3ofh6q7gmbcds1.PNG)
 {% endcollapsible %}


#-------------------------------------------

## Ribbon / Banner generator
The links help to generate  ribbons and banners.
{% collapsible Click to Expand Ribbon Generator List %}  
#### 1. [Badge Generator](https://badgen.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bupaildga1anpqxabzsr.PNG)
#### 2. [Doodle Nerd](https://doodlenerd.com/css-element/ribbon-generator) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgxd9cxc65majm7diubh.PNG)
#### 3. [CSS Portal : Ribbon](https://www.cssportal.com/css-ribbon-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh841qqv37vjsbjrrj3n.PNG)
#### 4. [CSS Portal : Ribbon Banner](https://www.cssportal.com/css-ribbon-banner-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v75u9mqx29v3cweig294.PNG)
{% endcollapsible %}


#-------------------------------------------

## Underline generators
These links help to generate underlines and animations that can be applied on underlines in CSS. 
{% collapsible Click to Expand Underline Generator List %}  
#### 1. [Underline generator](https://underline-generator.netlify.app/?ref=undesign)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrf8uqvl3inbprtc8d67.PNG)
#### 2. [CSS Bud](https://cssbud.com/css-generator/css-underline-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2msrc6b1v5ob3k7qy8xa.PNG)
{% endcollapsible %}


#-------------------------------------------

## Hamburger Menu Icons
The below links help to generate beautiful hamburger menus icon. 
 
{% collapsible Click to Expand Hamburger Menu Icons List %}
#### 1 .[Hamburgers] (https://jonsuh.com/hamburgers/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfkm17ewcatwnhdi18zi.PNG)
#### 2. [Burger-generator](https://burger-generator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f87lqzmuvqhgqrv9mqgc.PNG)  
{% endcollapsible %}


#-------------------------------------------

## 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.

{% collapsible Click to Expand Table Generator List %}  
#### 1. [Div Table](https://divtable.com/table-styler/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74u6i7p0qpdb1ryy1b13.PNG)
#### 2. [CSS portal](https://www.cssportal.com/html-table-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmlqyb567r475h0w43sz.PNG)
#### 3. [HTML.am](https://www.html.am/html-codes/tables/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhulc0ouwl8yn7dj0xbj.PNG)
{% endcollapsible %}


#-------------------------------------------

## Random Generator
{% collapsible Click to Expand Random Generator List %}
  #### 1. [3D Book Cover Creator](https://3dbookcovergenerator.netlify.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mq37gp4bulbg4mowoxna.PNG)

#### 2. [Water pipe](http://dragdropsite.github.io/waterpipe.js/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pvj3yhfznvuaywpb2ex.PNG)

#### 3. [Card Flip](http://foxcodetango.com/css-card-flip-generator/index.html)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7kswohdkuj2wjbyiudd.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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.

 {% collapsible Click to Expand CSS Button Resources List %} 
#### 1. [GradientButton](https://gradientbuttons.colorion.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14ylylkz0xj2vgg68en1.PNG)

#### 2. [css3buttongenerator.com](https://css3buttongenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glmxf71r4ivy37yp8jeg.PNG)
#### 3. [bestcssbuttongenerator.com](https://www.bestcssbuttongenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in9t1zsgwe49wyyk34ez.PNG)
#### 4. [cssbuttoncreator.com](https://cssbuttoncreator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqvxn20w89c85bp1mkpp.PNG)
#### 5. [cssportal.com](https://www.cssportal.com/css3-button-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrjbglxxcrfbcutallkn.PNG)
#### 6. [Loading.io](https://loading.io/button/generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5yr8rjducppqftburmp.PNG)
#### 7. [fromdev.com](https://tools.fromdev.com/css-button-generator.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t1iamx8dzybedxwly5z.PNG)
#### 8. [html-code-generator.com](https://www.html-code-generator.com/css/button-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xmcmrtpjfisjv07zbh4.PNG)
#### 9. [cssgenerators.net](https://www.cssgenerators.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7q6arxcd7xsj8sckcdv.PNG)
#### 10. [buttonoptimizer.com](http://buttonoptimizer.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oogul1ts3186ot4xef9u.PNG)
#### 11. [dextronet.com](https://www.dextronet.com/css-buttons-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/906265hjfmxcsqc3ta4z.PNG)
#### 12. [sciweavers.org](http://www.sciweavers.org/i2style)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvzd405mmsm83qvzkb7a.PNG)

#-------------------------------------------

## Flip Switch
#### 1. [cssportal.com](https://www.cssportal.com/css3-flip-switch/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdi34whfik0dmfnsg642.PNG)
#### 2. [proto.io](https://proto.io/freebies/onoff/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdi34whfik0dmfnsg642.PNG)
#### 3. [html-code-generator.com](https://www.html-code-generator.com/css/radio-button-checkbox)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ksjn2s5gg2jfcbdnvt9.PNG)
#### 4. [Bun](https://bun.js.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhc4459o2pdswmkmov2k.PNG)

#-------------------------------------------

## Checkbox Generator
#### 1. [Doodle Nerd](https://doodlenerd.com/html-control/css-checkbox-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er5rug2ibx1aw429bsf5.PNG)

#### 2. [Bun](https://bun.js.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4iycaifgbs1vv38j5p4.PNG)

#-------------------------------------------

## Radio Button Generator
#### 1. [Doodle Nerd](https://doodlenerd.com/html-control/css-radio-button-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h53ecznhxbl6n6atftk0.PNG)
#### 2. [Bun](https://bun.js.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4iycaifgbs1vv38j5p4.PNG)

 {% endcollapsible %}

#-------------------------------------------

## CSS Animation Resources
The below resources help you to get CSS code to animate various components of your web projects.

 {% collapsible Click to Expand Animation Resources List  %} 
#### 1.[The App Guruz](https://www.theappguruz.com/tag-tools/web/CSSAnimations/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dp6zeg86j9vyp9j44jf.PNG)
#### 2. [CSS animate](https://cssanimate.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0621pbfm8y366rtmiq4.PNG)
#### 3.[Animatelo](https://gibbok.github.io/animatelo/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kuiyyzibet8hj5dvhaq.PNG)
#### 4.[All Animation CSS3](https://all-animation.github.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n59wf6ax7zkrbliq2fcy.PNG)
#### 5.[CSShake](https://elrumordelaluz.github.io/csshake/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm2slcpnnad51iy67nll.PNG)
#### 6.[CSSAnimation](http://cssanimation.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4ox2wsshfms3desfppi.PNG)
#### 7.[Hover.CSS](https://ianlunn.github.io/Hover/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4og2h1ehz8mrg4wx7hc6.PNG)
#### 8.[Infinite](https://tilomitra.github.io/infinite/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfjfatpmltu7fyd1z6hb.PNG)
#### 9.[It's Tuesday](https://shakrmedia.github.io/tuesday/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrh18jt8g0bd5sjr7rlk.PNG)
#### 10.[Magic](https://www.minimamente.com/project/magic/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juc4b4j5mvnicw3miitf.PNG)
#### 11.[Micron](https://webkul.github.io/micron/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f2058uf6gjaaf7z06l2.PNG)
#### 12.[Motion UI](https://zurb.com/playground/motion-ui)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vd79z14ctgdw2bv11w15.PNG)
#### 13.[Obnoxious](https://tholman.com/obnoxious/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc37v6i21edol428w6qq.PNG)
#### 14.[Reboundgen](https://dwarcher.github.io/reboundgen/examples/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81feyzvg6rdwg9j8hnlq.PNG)
#### 15.[Rocket](https://minimamente.com/example/rocket/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4i8if1477zy91wuq5xd.PNG)
#### 16.[Wicked CSS](https://kristofferandreasen.github.io/wickedCSS/#)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7ifwbbtjkdy2xfzfqc2.PNG)
#### 17.[Animista](https://animista.net/play/basic)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8nvvnmsjgiyh5x92uys.PNG)
#### 18.[Animate.CSS](https://animate.style/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy96015n0sngr6flo30b.PNG)
#### 19.[Keyframes](https://keyframes.app/animate/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn6jr8xpt5ee3hvzkv5w.png)
 {% endcollapsible %}

#-------------------------------------------

## Icons 💥
The below links provide with mostly free icon resources, which can be used in web projects.

{% collapsible Click to Expand Icon Resources List %} 
#### 1. [Feather Icons](https://feathericons.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/419rd9q1l4gazht1jqt4.PNG)
#### 2. [CSS.gg](https://css.gg/app)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0h4pmkg9u2tnmk18gm9.PNG)
#### 3. [Jam Icons](https://jam-icons.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mxrzmqlinppuymrjkl7.PNG)
#### 4. [Line Icons](https://lineicons.com/icons/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c65wr15hkuj4xdytepxf.PNG)
#### 5. [Material Icons](https://fonts.google.com/icons?selected=Material+Icons)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjp3frr88fc8a8j28mrm.PNG)
#### 6.[Iconmonstr](https://iconmonstr.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9mzpa8viqifwdqz3285.PNG)
#### 7. [Pixsellz](https://icons.pixsellz.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wzcwo9hl699i6z866j6.PNG)
#### 8. [Iconshock](https://www.iconshock.com/svg-icons/)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb8w46tswkoya6u93amh.png)
#### 9. [Icon8](https://icons8.com/icons)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6tdaalw8u5z8eh2uqui.png)
#### 10. [Flaticon](https://www.flaticon.com/)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe7sfbh4intdos1njx7d.png)
#### 11. [Freepik](https://www.freepik.com)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge6n5j4uobp6jm5fuk2f.png)
#### 12. [Icon Ninja](https://www.iconninja.com/)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyexhprsk5ydlowb4sm4.png)
#### 13. [SVGrepo](https://www.svgrepo.com/)
![Site Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/347yh4tgntq87uwsp7xi.png)
#### 14. [Captain Icon Web](https://mariodelvalle.github.io/CaptainIconWeb/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5l0rtnbjl6rplxclhce.PNG)
#### 15. [Font Awesome](https://fontawesome.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl7x4pnjrqrup3avovig.PNG)
#### 16. [Smplkit](https://www.smplkit.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzodn06n9qlb85uk8yqp.PNG)
{% endcollapsible %}


#-------------------------------------------

## 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. 

 {% collapsible Click to Expand Colour Gradient Resources List %}
#### 1. [Eggradients](https://www.eggradients.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z09h1kuxyx297m7hl5za.PNG)
#### 2. [Colorzilla] (https://www.colorzilla.com/gradient-editor/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffnxbr70sf5wkib4het3.PNG)
#### 3. [WebGradients](https://webgradients.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iojot8g73jfijbp2zqdb.PNG)
#### 4. [MyColor.space](https://mycolor.space/gradient)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go4mhel5e3qd7p4xjw6c.PNG)
#### 5. [CoolHue](https://webkul.github.io/coolhue/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le1gems6wdzt9vdzqkj5.PNG)
#### 6. [GradientHunt](https://gradienthunt.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b13kq7ea4apm3ojldwdq.PNG)
#### 7. [UIgradient](https://uigradients.com/#Aqualicious)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s6q6bf7nqes9kzk7rk0.PNG)
#### 8. [Grabient](https://www.grabient.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzktnatr2f2s8at5r6t1.PNG)
#### 9. [Mdigi](https://mdigi.tools/gradient-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w8f7xrc4a5jez5qsdh9.PNG)
#### 10. [Coolors](https://coolors.co/gradient-maker/aed1ef-f2dfc1-f0b9ef)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60zaq2gcj5q2u4xb82gh.PNG)
{% endcollapsible %}

#-------------------------------------------

## Color Palette Generator
The below links will help to generate color palette, which can make your web project awesome.
{% collapsible  Click to Expand Color Palette Resources List %} 
#### 1. [ColorsOnTheWeb](http://www.colorsontheweb.com/Color-Tools/Color-Wizard)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o486hdoszehf0r84qyb0.PNG)
#### 2. [ColorPalettes](https://colorpalettes.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br43olifwnuwjnzve97l.PNG)
#### 3. [ColorHunt](https://colorhunt.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hw4bzns5c4zl29a13af.PNG)
#### 4. [0 To 255](https://www.0to255.com/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbrxakifv963y296cqaf.PNG)
#### 5. [Hailpixel](https://color.hailpixel.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnguvcbgetca1bh2wtw6.PNG)
#### 6. [Clrs.cc](https://clrs.cc/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atvloro88gdk6xroa4v4.PNG)
#### 7. [HTMLColorCodes](https://htmlcolorcodes.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nv0lmxxszsid620u53h.PNG)
#### 8. [Coolors](https://coolors.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10dd21jgze3kb6zqrruu.PNG)
#### 9. [ColorMind] (http://colormind.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbe8cuc3nde2pfpsx2k4.PNG)
#### 10. [Muzil](https://colors.muz.li/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1197s087gifkol3e1m6.PNG)
#### 11. [Canva](https://www.canva.com/colors/color-palette-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q1xp4c0nmq0l4t6icp0.PNG)
#### 12. [Mycolor.space](https://mycolor.space/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2d8jc3pvd9eujjmnhmc.PNG)
#### 13. [AdobeColorWheel](https://color.adobe.com/create/color-wheel/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i677jzsog1mvofkd7xsf.PNG)
#### 14. [Huesnap](https://www.huesnap.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yquscpm8nc9qjycbpao.PNG)
#### 15. [MaterialPalette](https://www.materialpalette.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wk9d8bojvzwhdi6atlm.PNG)
#### 16. [ColorExplorer](http://www.colorexplorer.com/colorpicker.aspx)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6v6e3otcdp0osilnzjs.PNG)
#### 17. [Paletton](https://paletton.com/#uid=14j0u0kllllaFw0g0qFqFg0w0aF)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6960n90xns9xpmeb79r4.PNG)
#### 18. [BrandColor](https://brandcolors.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehc1eixsf37m01uv2eap.PNG)
#### 19. [ColorPoint.io](https://www.colorpoint.io/free-tools-for-designers/color-tints-and-shades/#111111,ffffff)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylbxgt07rhm6r736k28d.PNG)
#### 20. [Color Mixer](https://colormixer.web.app/0300e1ffff008409fff99537643c0201a501e4222f320000ff00fa48283a0400/Nightclub)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f27923scdb1llp7dmi44.PNG)
{% endcollapsible  %} 

#-------------------------------------------

## 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.

{% collapsible  Click to Expand SVG Shapes Resources List %} 
 #### 1. [Blob Maker](https://www.blobmaker.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txprj4g0lm2zywhjssi3.png)
#### 2. [Squircley](https://squircley.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfhhjhdiuczx3zc8kgjt.png)
#### 3. [Softr.io : SVG Shape Generator](https://www.softr.io/tools/svg-shape-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38c71vm1y0j63ire7zvs.png)
#### 4. [Blobs](https://blobs.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhle8q8pro3gir1a5vv8.png)
#### 5. [Chartgen](https://chartgen.frederickallen.co/pie.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb5vt8xqnuv93k95s77i.PNG)
#### 6. [Outpan : Gradient Wave Generator](https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nwlkr6tq6icamm2gkhd.PNG)
#### 7. [Wavelry](https://wavelry.vercel.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9s68lb5s3a8rbaiadne.PNG)
#### 8. [Softr.io : SVG Wave Generator](https://www.softr.io/tools/svg-wave-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyi41akc744dapp85c8f.PNG)
#### 9. [Getwaves.io : Wave Generator](https://getwaves.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqr7wxlflxno8s0akkn6.png)
#### 10. [SVGwave.in : Wave Generator](https://svgwave.in/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0r3n672zdjtu95aopmx.png)
#### 11. [Haikei : Multiple Shape Generator](https://app.haikei.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtchdaamx193rurbogm4.PNG)
#### 12. [SVGwaves.io](https://www.svgwaves.io/?ref=undesign)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rix7v0941vtbmnil9x96.PNG)
#### 13. [Shape Divider](https://www.shapedivider.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkza9h3ypd9zdqxxs4gz.PNG)
#### 14. [Omatsuri](https://omatsuri.app/page-dividers)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iplstlgnv6vchd6rr4ua.PNG)
{% endcollapsible %}

#-------------------------------------------

## 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.

{% collapsible  Click to Expand SVG Background Resources List %}  
#### 1. [SVG Backgrounds](https://www.svgbackgrounds.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxjk51c44ftww2xcrvm6.png)
#### 2. [Hero Patterns](http://www.heropatterns.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9umtd1hd3l7pet616o5.png)
#### 3. [Philiprogers: SVGPatterns](https://philiprogers.com/svgpatterns/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvsqwwpxh465uf0qx0ne.png)
#### 4. [The Pattern Library](http://thepatternlibrary.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl0g1tbjy6bw7x6xwryi.png)
#### 5. [Plain Pattern](http://www.kennethcachia.com/plain-pattern/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m6xsh3ftkkc67i224pv.png)
#### 6. [Patternico](https://patternico.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5rdlcbadsmlltbl8i0t.png)
#### 7. [Paaatterns](https://products.ls.graphics/paaatterns/preview.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yny63z5p0u3om7w3jaqu.png)
#### 8. [Cool Background](https://coolbackgrounds.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5foqffi5wtv1z6axh6mr.png)
#### 9. [Btmills: Geopattern](http://btmills.github.io/geopattern/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cm1tpdc8nfbfs6yzsb2.png)
#### 10. [Bgjar](https://bgjar.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57sswvdvpygsrdsa09d0.png)
#### 11. [Svgeez](https://www.svgeez.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xez665nblkdrms8smu8t.png)
#### 12. [Patternpad](https://patternpad.com/editor.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax34572fqje6y8p7hpg9.png)
#### 13. [Tartanify](https://tartanify.com/tartan/lyon-jeffrey-m-hunting-personal)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3gu7oen33eo4jtnujbh.png)
#### 14. [Bg Siteorigin](http://bg.siteorigin.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crf1oxybrnjfvjqkbsdj.png)
#### 15. [Tabbied](https://tabbied.com/select-artwork)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wappcfjzyqwmk8axfn6.png)
#### 16. [Pattern Monster](https://pattern.monster)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7xz6hae9ulx4ido2xiv.png)
#### 17. [Visiwig](https://www.visiwig.com/patterns/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h034i73t2gxnna0njd7h.png)
#### 18. [Pattern Ninja](https://patterninja.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3igkak4bb8iekg2edi5g.png)
#### 19. [CSS Background Patterns](https://online-free-tools.com/en/css_pattern_generator_background)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfxuc6hl6s60j8ykxuuz.png)
#### 20. [Patternify](http://www.patternify.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ph3olfxiqfroi9afse7.png)
#### 21. [Animated CSS Background](https://wweb.dev/resources/animated-css-background-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed7dn09whct1zp7rxl5r.png)
#### 22. [CSS Stripes Generator] (https://stripesgenerator.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd1sxbstgfym0i02zmsl.png)
#### 23. [Patternizer] (https://patternizer.com/yy47/72)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rkp43zvtlnohm07e01t.png)
#### 24. [Doodad: Pattern Generator](https://doodad.dev/pattern-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3up1kaya9pknlk2z4blk.png)
{% endcollapsible %}

#-------------------------------------------

## 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

{% collapsible Click to Expand Illustration Resources List %}  
#### 1. [Undraw](https://undraw.co/illustrations)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z0rntk4g9k44yu28dtw.png)
#### 2. [Draw Kit](https://www.drawkit.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xputyajvbwn1w4no3px7.png)
#### 3. [Indian Doodle](https://iconscout.com/illustration-pack/indian-doodle)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb1wd2kzxsk1494y48vb.PNG)
#### 4. [Poke](https://www.karthiksrinivas.in/poke)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivmlgg0flbvus2ntymb1.PNG)
#### 5. [open Doodles](https://www.opendoodles.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psmh97241p0jijsgm73m.PNG)
#### 6. [Lukaszadam](https://lukaszadam.com/illustrations)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ltiupbeyl6dvbg7ogg4.PNG)
#### 7. [IRA Design](https://iradesign.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yptmywqvtv8n3eywf5d7.PNG)

#### 8. [Mixkit](https://mixkit.co/free-stock-art/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rajncbafaeo5c95v9ca.PNG)
#### 9. [Scale](https://2.flexiple.com/scale/all-illustrations)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv0k3y3wspz283lg67bv.png)
#### 10. [Pulse](https://sleekbundle.com/product/pulse-illustration-kit/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezyta5xwmkyd581quk95.png)
#### 11. [Gee Me](https://geeme.vercel.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kriv828b35ci9efg86io.PNG)
#### 12. [Absurd](https://absurd.design/#slide-6)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4771n0xxl7zbkct0crj.PNG)
#### 13. [The Noun project](https://thenounproject.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gciseb4suexp3ivfbdyp.PNG)
#### 4. [Fresh-folk](https://fresh-folk.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jzhq6rwgamchdebylza.PNG)
#### 15. [Rawpixel](https://www.rawpixel.com/search/illustration?sort=curated&page=1)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csr0c4puj5r8lfc20t01.PNG)
#### 16. [Webpixels : Eye Pop](https://webpixels.io/illustrations)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imbd1ndnk23ufs485n43.PNG)
#### 17. [Delesign](https://delesign.com/free-designs/graphics/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wluirrec5lcjx8jz8z2a.PNG)
#### 18. [Manypixels](https://www.manypixels.co/gallery?ref=lapaninja)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrbuyc091nwwplswc9yg.png)
#### 19. [Icon8](https://icons8.com/illustrations)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mud8xjq867gqvik4z6pi.png)
#### 20. [Humaans](https://humaaans.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mi8x8akqcx4wq4s5psd.png)
#### 21. [Streamline](https://lab.streamlinehq.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehuqvn432tj9cj3sov88.PNG)
#### 22. [Lucid](https://lucid.pixsellz.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpxn3r1266x0ii01j2ya.png)
#### 23. [Ui8](https://ui8.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avybo04r5dsz04lsicpq.png)
#### 24. [Control.Rocks](https://control.rocks/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc2drqsq2q0mqsyz4xec.png)
#### 25. [Niceillustrations](https://niceillustrations.com/free-illustrations/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euvglymwkz21qdw48imd.PNG)
#### 26. [Pixel True](https://www.pixeltrue.com/packs)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc2kb9eafbm5e7451i2a.png)
#### 27. [Isometric](https://isometric.online/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc8nj6mrhyc1siivs53z.png)

#### 28. [Story Set](https://storyset.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqjpuemqdtiilnl6ii8q.PNG)
#### 29. [Open Peeps](https://www.openpeeps.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xejoa036yddvxe04f45p.PNG)

#### 30. [Black illustrations](https://www.blackillustrations.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvkhiy0ml5alzlormbff.PNG)

#### 31. [Free Illustrations](https://freeillustrations.xyz/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx1oh4owhvaor0ns7b86.png)

#### 32. [Illlustrations](https://illlustrations.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4o6o2ap9tzj6ghkr4m4.png)
#### 33. [Getillustrations](https://www.getillustrations.com/illustration-packs)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im7m7484noe877v9e6o7.PNG)

{% endcollapsible %}
#-------------------------------------------
{% post https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8 %}
{% post https://dev.to/kiranrajvjd/all-that-you-need-to-know-about-date-and-time-in-javascript-5bfd %}
{% link https://dev.to/kiranrajvjd/25-awesome-fonts-from-google-fonts-40im %}
{% link https://dev.to/kiranrajvjd/24-html-tags-you-may-not-know-37be %}
{% link https://dev.to/kiranrajvjd/12-simple-button-hover-animation-using-css-1ff1 %}