Finding stuff to make your life easier is one of our passions. Whether it be freebies like fonts and icons, or tools to help you do your job, we search and find them so you can focus on the important things. For this post, we’ve found some online tools that are useful for design and development tasks, and the best part is…they’re all free to use.
0 to 255
0 to 255 is a simple tool that helps web designers find variations of any color.
Spritebox
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.
jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
Frame Box
Frame Box is an easy to use online tool for creating and sharing wireframes.
CSS3 Generator
CSS3 Generator is a simple tool that creates some cross-browser CSS3 code based on whatever values you want.
ProCSSor
ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.
Super Conversion Button
This little tool let’s you easily create a beautiful, effective call-to-action button in seconds.
wordmark.it
Wordmark.it is a tool that lets you quickly preview how a wordmark looks with the fonts installed on your computer before setting out to find new ones.
Nice collection of tools. Its really helpful.
Frame Box – wow!
Seems like it will be a good alternative to the Axure I currently use.
Thank you for useful resources.
ProCSSor’s hyperlink leads to 0to255. Btw, nice collections 🙂
Fixed. Thanks.
Thank you so much for the post, I was stuck deciding typeface for an Identity project and Wordmark.it just helped me.
Thanks again 🙂
thanks for the Css3 Generator, definitely needs it this time..
But, I’m looking for the transparency.. Ain’t seeing it in the generator, but I’ll keep on looking for other sources. Thanks for sharing these, the first one is also interesting.
I’m just about to start learning javascript and the JSFiddle tool looks ideal for this. Thanks for this great post.
Really useful and awesome…
Really great collection, wordmark.it and spritebox are just awesome.. instant bookmarks!
Thank you for sharing, great collection!
Nice list, 0 to 255 is new to me, thanks!
Thanks for these great tools! Can’t wait to try Spritebox and the CSS3 Generator to learn some new stuff! 🙂
Super Conversion Button should save me a lot of time, thanks!
I’m surprised a button generator made it into this list.
Very useful tools… Thanks for shearing.
Nice collection of tools.
Wordmark.it is perfect! I was just flipping through my 2,800 fonts for a client design. This made my day sooooo much easier!
You need to try https://webarti.com/best-CSS3-button-maker/ too. This is a new CSS3 tool that allows you to create stylish buttons, boxes etc. I think, it deserves to be listed in this collection.
nice tools. Thanks for share
great tools, thanks for share
but i love https://www.colourlovers.com/ to find color variation for web page, such as palette or pattern
It’s a simple one, but for rescaling images http://www.batchimageresize.com is another useful tool for developers. You just throw everything in one zip and upload.