50 free web tools

Design tools

26. CSSketch

CSSketch is an open source CSS plugin for Sketch, the popular Mac-based design and prototyping app. With it, you can write CSS inside Sketch, applying the styles to the items on the page in your current Sketch file.

27. Fluid for Sketch

Another Sketch plugin: this one assists with designing responsive layouts in Sketch. Fluid's features include the ability to relatively pin, offset, centre and size objects, and use mathematical expressions.

28. AllTheFreeStock

This is a massive single resource where you can search for free stock photography from loads of different sites. It includes popular free sources such as Unsplash, along with other, lesser-known sites, to give you plenty of options for populating your designs.

29. Octicons

There are countless options for icons, and GitHub has released its own nicely designed set. Octicons is available as an icon font (or web font), which is commonly inserted into a page using CSS pseudo-elements.

30. Transformicons

50 free web tools Transformicons

Transformicons: SVG and CSS icons that can be animated with CSS transitions

Transformicons is a different kind of icon set. These are SVG- and CSS-based icons that incorporate CSS transitions for an animated effect that can be controlled with some JavaScript.

31. Icono

One final icon option; this time a pure CSS set built with CSS pseudo-elements.

32. 0to255

50 free web tools 0to255

Find variations of a chosen colour in hex format with 0to255

An online colour tool that helps designers find variations of a chosen colour (e.g. for choosing hover states, contrasts, gradient colours, borders and so on). This takes away the need for guesswork with hex codes, and is great for those who design in the browser.

Next page: free RWD and mobile web tools...