With the start of every year new developments and advancements in the world of web design tools come about. With all of the new tools available it may be a bit confusing to navigate. From animation tools to tools to make colour palettes, this small selection of available new web design tools are sure to help you simplify your work in some way.

Material Palette

Material Design is a methodology for creating a way to make web app designs work on all devices from desktops to tablets and mobile phones. In the same fashion, Material Palette is a web design tool that will allow you to create colour palettes in the same style as Material Design. All you have to do is pick two colours to base your palette around and this web tool will create the best suited colour companions for your primary text, secondary text, your dividers, and an accent colour. If you’d like to see how the tool works, you can download an example interface in CSS, SASS, LESS, SVG, XML, and PNG.


While IRC has long been used as developers to discuss their work, Pilgrim* seems to be stepping up as the place where designers can chat about their work in a simpler fashion. Since the tool is geared toward designers it features appealing typography, along with sound effects, and animation. For example, there is an animated indicator that lets you know when another member is typing. It’s also easy to set up a channel to communicate with other designers without any signup or installation necessary. To use the tool all you have to do is go to pilgrim.io, start your channel, share the link, and begin chatting with other people. As a testament to the tool, the creator Murat Pak confirmed that there are various design studios that are already using Pilgrim* for their internal communications thanks to the ease of use. Pak is looking to develop the tool further by creating a saved history so that users’ conversations have some importunity.


This tool allows you to produce animated progress bars with SVG paths. The end result is built to work across all major internet browsers including Internet Explorer 9+. You’ll be able to make your own paths or use the available shapes to customise your animation. Everything is done with JavaScript in order to give you more control over the process and better support across browsers.

CSS Gradient Animator

This new web tool creates animated gradient backgrounds. All you have to do is state the angle and speed of the animation along with the colours, and the tool will create the CSS needed for the job. The end result, if done properly, will be a coloured gradient that subtly shifts across your website’s background. To use the result you simply have to take the code off of the screen and use it in the backend or you can save the code as a Gist.


Snabbt.js still in beta but once up and running it’ll be a minimalist animation library. It is created in a way that it ends up being less than four kilobytes minified and Gzipped. It can produce 60fps even when used on a mobile device. The concept is that the library will allow users to make seamless animations without a lot of knowledge on browser rendering.

Foundation for Apps

This web design tool is a front-end framework that allows you to create fully responsive web apps that are mobile-optimised and properly responsive. The developers have created a new grid that is based on the popular Flexbox in a simpler way that is made specifically for apps. They also developed classes and mixins known as Motion UI that allows you to easily add animation to your apps.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.