💪Become a Front-end Master using these awesome tools 🖱
Tags: css, webdev, productivity, html
Published: 2022-03-27 17:42:07

**Front-end development** refers to developing the part of a computer system or application with which the user interacts directly.
If you are a front-end developer, full-stack developer, aspiring front-end developer or _a creature that can breathe and read this_ -- this post is for you!

---
Got seatbelts? Let's go

### 1. [Coolers](https://coolors.co/)
Provide you a color scheme generator along with many awesome trending color schemes!

![coolers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wzqbkl9ijxd9phklgou.jpg)
### 2. [ColorBox](https://colorbox.io/)
Lets you create your own color scheme with a whole variety of tools!

![colobox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yib1casbr63rv1x8jsb.jpg)
### 3. [Adobe Color](https://color.adobe.com/)
Spin around the color wheel, know more about colors through playing with them along with many insanely nice color schemes available at one search!

![adobe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/728upq6am749pv6gnhmh.jpg)
### 4. [Wordmark](https://wordmark.it/)
Type in your sentence/word and scroll to see how it will look in _web safe fonts_!

![wordmark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iljo3e6qeoou1yx0g98w.jpg)
### 5. [PNGtoSVG](https://pngtosvg.com)
Simply convert your png to svg and use it in your projects.

![pngtosvg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oujv9xh3h0wp4cu0qlbd.jpg)
### 6. [CSS3 Generator](http://css3generator.com/)
Provides perfect CSS3 code that works on every browser!

![css3gen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvc7m7g29nc7ts5moino.jpg)
### 7. [CSS Filters](https://www.cssfilters.co/)
Apply filters using the tools and use what please you.

![cssfilters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8krygrklrd9k90vt2ya5.jpg)
### 8. [Fancy Border Generator](https://9elements.github.io/fancy-border-radius/)
Bored of those basic border radius things, here create fancy-fancy borders for your divs or buttons or any element you like!

![fancy-border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb9qrcedm3onqdwxi9eo.jpg)
### 9. [Blob Maker](https://passionhacks.com/blob-maker)
Blobs.. makes your website look so blobby and cute. Create them with this awesome tool and have blobby fun.

![blobmaker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzklq98o3lml6c3qpnez.jpg)
### 10. [Blob Maker 2](https://www.blobmaker.app/)
One more blob creator. This one is pretty cool too! I use both ;)

![blob](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0mfi0ylspwwtzhi0hji.jpg)
### 11. [Get Waves](https://getwaves.io/)
Create wavy wavy website using this great tool.

![getwaves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd07ky6nhofndzp3pnvo.jpg)
### 12. [Clippy](https://bennettfeely.com/clippy/)
The best clipping tool I use most. Helps create really nice clip paths!

![clippy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9otj1meppg427g5itnep.jpg)

---

Hope this helps you! See you around!

![gif](https://res.cloudinary.com/practicaldev/image/fetch/s--m0l6e1PL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://c.tenor.com/dndGxR4-vE4AAAAM/see-ralph.gif)