2376359338_1cd7d0ebb8_z

25+ Free Online Web Design Tools You Should Bookmark

on October 10, 2010 | 17,609 views

While designing web sites, it’s necessary to have a good toolset. Not only it will save you time, it will also give you inspiration to create better site projects. In this post i will list you really useful free online tools you can use, to speed up your web design aspects.

Lorem Ipsum & Text Art Tools

1. Lorem Ipsum Generator

You can use this tool to generate lorem ipsum text for your template & theme design works. It is surely better than repetitive text.

2. Text Ascii Art Generator

This tool generates ASCII art for any text you choose. Could be used for a source signature like tumblr.

3. Mixed word art generator

With this free tool you can generate awesome & catchy text art for your sites.

Online Color Pickers & Color Scheme Generators

4. Kuler by Adobe:

Powered by adobe (R), kuler allows you to create custom color schemes to save & export to photoshop and various design tools. You can also visit this site for some colorful inspirations.

5. Color Scheme Designer:

This simple tools automatically picks generates various schemes for any color you choose. It allows you to pick a light or dark scheme.

6. Color Trends + Palettes :: COLOURlovers

This site gives you some inspiration about the colors to choose while designing your sites. Its web design tab includes custom colors and also color sets that users create for their designs. You should check out popular colors to get a fresh new look!

7. Ultimate CSS 3 Gradient Generator

This great tool creates awesome CSS Gradients you can use as your page background, button background and even content backgrounds. No image is needed, just css gradients makin’ your life easier.

Online Background & Pattern Generators

8. Pattern4u – Classic | Kollermedia.at

This site is a collection of all types of background patterns. You can find various types patterns like classic wallpapers, stripes, even grass, wood & chocolate! Great collection so check it out!

9. PatternCooler

This site gives you options to change pattern colors & size before using it on your site. It has a lot of funky backgrounds you can use with your music blogs, funny sites etc. It’s a little hard to navigate between steps though.

10. Stripemania – Striped background generator

A useful striped background generator allows you to add gradient stripes, change orientation and size of stripes. Makes awesome backgrounds for design specific blogs and gaming sites.

11. Dotted Background Generator

12. Tartan Designer – Tartan Maker – Tartan Background pattern generator

13. Stripe Generator – ajax diagonal stripes background designer

CSS grid systems, CSS edit & fix tools

14. 960 Grid System

This grid system allows you create awesome site layouts just using css classes. You can use custom shortcodes and this css framework together to create awesome startup pages for your blog. It is easy to implement and learn. If you are tired of setting widths and heights just give it a try.

15. Blueprint CSS


This is another awesome grid system comes with other usefull css source like print styles, forms & button interfaces, and even typography styles!

16. The Grid System

17. Free Online CSS Compressor

Your site load takes too much? Use this tool to compress your css files.

18. ie6fixer – onderhond.com

A great tool for fixing IE6 errors on your site. Thanks to onderhond for this great tool.

19. CSS Splitter

A css splitter to split your css files into layout and color scheme. You can easily modify your color schemes afterwards to create multi-scheme themes.

Icon converters, favicon generators & icon libraries

20. ConvertIcon!

You can use this awesome tool to convert any image file to icon files. It creates multiple sizes and allows you to create an icon library with great ease.

21. FavIcon from Pics

Create favicon for your site using any image, photo and even animated gif files. It also takes your facebook avatar to create a favicon for your site!

22. E-Mail Icon Generator

Create an e-mail address image to use on your site safely. Helps you prevent spam in your inbox.

23. Iconfinder | Search and download free icons

Awesome online icon library, browse through free icons to use on your site projects.

Preloader generators

24.  Ajax Loading Gif Generator

Using this tool you can create your own style ajax loading images. It is so easy to follow up.

25. Preloaders.net

Just another loading image generator.

Other tools

26. font-family.com

27. Box Shadows

28. Postable

This tool converts special chars to their html alternatives. Can be used while posting codes on your site.

29. Hillbilly random text generator

Another powerful text generator. This tool has some extraordinary text generation options like Greek, Pseudo German, Hillbilly, Metropolitan. You can choose which suits best for your site content.

Anything missing? Add your favorite online tools in the comments.

(image credit)

ADVERTISEMENT
ADVERTISEMENT

About Shailan.com Staff

Shailan.com is a design blog about WordPress and web design. We regularly write about wordpress, plugins, themes, web design resources, php, css, jquery, adsense and more.. If you want to get notified about our posts, be sure to subscribe to our feed or follow us on facebook.

Share Your Thoughts

Your email address will not be published.

10 thoughts on “25+ Free Online Web Design Tools You Should Bookmark”

  1. Azubuike says:

    That’s great, but I didn’t see photoshop in your list. why?

  2. Alexandra says:

    I love this! Definitely staying on track here.
    I’ve been using Colourlovers a lot myself, there’s good colour apps for Android as well.
    I’m using “This colour what colour”. Despite the “un”beautiful name it’s a great tool (if you’re in a room with good lighting). It combines with your Smart-phone camera so you take a photo of some object of which you like the colour, tip on the colour and it tells you the exact numbers.
    The other one’s called colour pal ant works similar to colourlovers. It’s for finding colour combinations – clicking on one of the colours will give you a lot more combinations using this colour and so on. Quite useful.

  3. thiet ke says:

    thanks for a good article

  4. Richard says:

    The css splitter on this page links to a 404 error, so here’s a working on http://www.richardodwyer.co.uk/tools/css_splitter/

  5. Webbyra says:

    Great! I have looked for Mixed word art generator for a day or two but i could not remember the name of it.

  6. Stiff says:

    Thanks. Nice article. But i’m found no converters or cryptors like this Bese64 decoder http://www.base64online.com/

  7. thanks.great share..bookmarked!

  8. DTX Studios says:

    Thanks for sharing the useful collection of tools. Its very useful for me. Will bookmark it.

  9. Thank you for posting these tools. This is very useful. Thanks again for sharing.

  10. Bryan says:

    Wow! Love this! Thanks. Gonna bookmark indeed.