20 Top frontend free development online tools
Tags: uiweekly, codenewbie, design, productivity
Published: 2020-11-24 11:43:11




#Introduction 


## Logos (Updates June 2022)

1. [Logo Creator](https://logocreator.io/)

Are you wondering about how to go about creating a brand for yourself?
Don't stress anymore. On this platform, you just need a name and tagline that's all.
You also can cusomize your brands using the design editor which is easy to use and does not require you to be an expert in UI/UX. You can export your assets in several formats as well!

![Logo creator website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiebx7qnlnpqfqzm21z1.png)


## Design
1. [Figma](https://www.figma.com/)


Figma is a vector graphics editor and prototyping tool . It is primarily web-based, with additional offline features enabled by desktop apps for macOS and Windows. This can really come handy to design.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kfafc21nn7532x5trmd7.png)


2.[Removebg](https://www.remove.bg/upload):

Remove backgrounds 100% automatically in 5 seconds with zero clicks. You upload an image and it automatically remove the background for free.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81sfc0ugpj5hylmxh6hn.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tecutym9lqpr03e3z92c.png)

3.[Photoresize](https://www.photoresizer.com/)

This site will freely resize your images for any resolution, It offers other free tools like; cropping, rotation, compression and more

4.[Free Logo](https://www.freelogodesign.org/)

FreeLogoDesign is a free logo maker for entrepreneurs, small businesses, freelancers and organizations to create professional looking logos in minutes. Get a free logo for your website, business cards or correspondence.

5.[Inpaint](https://theinpaint.com/upload) 

Inpaint reconstructs the selected image area from the pixels near the area boundary. Remove undesirable objects from your images, such as logos, watermarks, power lines, people, text or any other undesired artefacts. 

6.[Tiny Png](https://tinypng.com/), [Compressjpeg](https://compressjpeg.com/)


TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.


## Colors

1.[Material color](https://www.materialpalette.com/)

This site aids you with divers and a variety of colors for your designs
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/crjy1trns091xsb97ic3.png)

2.[ColorZilla/eye dropper](https://www.colorzilla.com/) 

ColorZilla and eye dropper are browser extensions that aid you easily pick up colors code from any site with very high precisions. Imagine you need the color code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/campmrgyiay2cqtboqyk.png)

3.[Colors.co](https://coolors.co/palettes/trending)


This site gives you the option to select several colors, generate several colors and instantly get their color of a particular site, no need exploring the dev tools to inspect the color. Just use this tool to get the color.

4.[CSS Gradient](https://cssgradient.io/), [UI Gradients](https://uigradients.com/)

Automatically generate your CSS gradient with a suitable GUI.

5.[CSS Generator](https://cssgenerator.org/)


Automatically generate the best box shadows, borders and more for free and get CSS code.

6.[Animista](https://animista.net/)

This tools aid you to generate css animations and automatically get the CSS equivalent code.

7.[Free CSS Preloaders](https://loading.io/css/)

## Illustrations
1. [Undraw](https://undraw.co/illustrations)

Undraw gives you a tone of illustrations for your design. It has a search bar where you can query based on what you are designing. You can also select your custom color and all illustrations will be redesigned based on the new color within a second.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsm6cucy0dke5t7aa12s.png)

## UI inspiration
1. [Dribble](https://dribbble.com/)
Dribble gives you a variety of designs for development. You can search for your designs as well as find designs based on the type of device; Mobile or web.
2. [Uplabs](https://www.uplabs.com/)

## Images:
1. [Pixabay](https://pixabay.com/)
This is a site where you can freely download images, illustrations, videos and vectors. These images are freely licensed for commercial use.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k02zuib3q03qjvxm0yx2.jpg)

2. [Pexels](http://pexels.com/)
Similar to Pixabay, This site offers pictures and images of various sizes and orientations for your site free of charge.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cb6z7qw679m5py3y1quf.png)

3. [Unsplash](https://unsplash.com/)
Unsplash is similar to other image providers, have a large variety of images and an advanced search bar. The search bar permits you to search wrt orientation, gender, number of people and more.


## Diagrams
1. [Draw.io](https://app.diagrams.net/)
This tool is very important for prototyping and designs. It can help you to draw your front-end design structure if you may want to share ideas with your friends.