When we need to update the styles of websites that are already online, we either perform the change locally (if we have the source with us) or FTP-edit it.

bluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible.

Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools).

It has features like color-picker, file manager, ruler, color comparison and more.

The editor keeps track of the changes made and auto-backups them in case you prefer to revert the styles.

Social networks allow users to customize how their profiles appear with avatars, backgrounds, cover images, etc.

Social Media Image Maker is a free, web-based tool that eases creating and editing these images.

The tool informs us with the required image dimensions for each service (Twitter, Facebook, YouTube, Flickr and more) and allows uploading any image + resizing or cropping them to fit the size.

Simply, from a single interface, it is possible to create social images for all major networks without the need to learn the requirements for each.

IcoMoon is a free service that enables us to create custom icon sets and icon fonts using different sets.

The application includes most of the popular and free icon sets (that can be selected from its library), we can choose which ones to use and select any number of items from them.

Once the selection is over, it offers 2 types of downloads: image and font.

The image version comes as PNG with optional sprite image + the CSS rules and the font version in multiple formats (EOT, SVG, WOFF, TTF).

Also, besides the icons of other designers, IcoMoon has its own and free icon set which is pretty huge and slick.

When presenting web or app prototypes to people (clients, collagues, friends..), showing it inside a real-world-like environment helps them to imagine easier.

PlaceIt is an awesome and free service, created by the talented folks at Breezi, that allows us to upload the screenshot of our prototype and get it placed in different environments.

The service already has multiple themes (like a hand holding the device or the device placed on a desk) and it has shots for iPhones, iPads and Macs.

Screenshots can be uploaded with drag ‘n’ drops or mentioning the URL and the output will be rendered instantly.

New themes are added within time and, if you have similar themes, you can send them to the Breezi team and they may add it as well.

CSS sprites are perfect for minimizing the number of requests made to load the images and improving loading speed.

However, for a sprite with many images, it takes time to create the sprite image and the CSS rules.

SpriteMachine is a very straightforward web application for automating the sprite generation process.

Just upload the images in a .zip file, choose the sprite image orientation (horizontal or vertical) and there you are.

One great thing about the app is, it also asks whether the rules generates should be in CSS, SCSS or SASS.

Viewport resizers are so handy when it comes to testing responsive layouts with no pain.

ish is an open source and simple app which is built with HTML-JS (although the source comes with a PHP file, check this to make it PHP-free).

It loads any given URL inside an iframe where the iframe can be resized with the help of predefined or custom widths so that it becomes possible to see how the layout reacts.

There is also a fun “Disco” mode that auto-changes the width regularly and we only need to watch to see if any issues exist with the layout.

Useless CSS3 Generator is a free web application that allows anyone to play with CSSs3 properties quickly.

It has generators for border-radius, box-shadow, text-shadow, opacity, RGBA and transform where values are selected with the help of sliders.

Once the values are updated, an HTML element displays the output in real-time and also generates the CSS rules.

Simply, in contrary to its name, a handy tool for anyone willing to learn and experiment CSS3 quickly.

Literally Canvas is an open source HTML5 widget, which can be integrated into any page, for enabling users to draw online.

It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom.

The widget is built with jQuery + Underscore.js and has an API to define the background color, tools and dimensions.

Also, an export function exists for easily pulling the drawn canvas as an image file.

Data URI images, base64 version of an image that is included in a file and is fetched in a single HTTP request, are mostly used for minimizing HTTP requests (which is great for speed).

Duri.me is a simple but very useful web application for creating Data URIs instantly.

In order to use it, just drag ‘n’ drop any image to the app and it’ll be converted. After that, you have the options to get the output as CSS, <img> or just the base64 text.

At WRD, several web-based sprite generators were shared in the past and here is another good one named Instant Sprite.

Instant Sprite allows us to add any number of images using a standard file input or drag 'n' drop.

It uses the Canvas and File API so that files are not uploaded anywhere.

Once the images are selected/loaded, we can remove or reorder them easily.

The application has an option to define the offset between images and also the direction of the sprite (vertical, horizontal or diagonal).

We can set the naming methodology for the "to be generated class names" using prefix, suffix and/or regex for complicated ones.

The sprite image is offered in PNG + GIF and the CSS + HTML required is generated instantly.

Instant Sprite is also open source which is nice for anyone willing to host or improve it.