description under construction
  1. Introduction
  2. Examples
  3. Help
    • Basic usage
    • Add your image to the Tiles Exhibition
    • Browser Support
  4. Updates
  5. To-do-List
  6. Related Links
    • About CSS Filters
    • Development

1. Introduction

With this Online-Tool you can style:

  • Images from your computer
  • Images from the Web
  • iFrames like YouTube Videos, Streetview etc.
  • Websites

and generate the css-code for the applied Filters.

Now (since 2016-Jan-8), you can also send your StreetviewArt to the Tiles Exhibition.

2. Examples

Filter Wizard Example Editing Youtube Video

Fig. 1: Edit colors of a Youtube Videofilter-wizard-screen-13.jpg
Filter Wizard Example Editing Website

Fig. 2: Edit colors of a Website filter-wizard-screen-12.jpg
Filter Wizard Example Editing Streetview

Fig. 3: Edit colors of Streetviewfilter-wizard-screen-14.jpg
Filter Wizard Example Editing Webimage

Fig. 4: Edit colors of a Webimage filter-wizard-screen-15.jpg

3. Help

3.1 Basic usage

Wrap an image or <iframe> in a <div> or <figure> with the filter styles. You can also use an <iframe> with YouTube Video, Streetview etc. etc.

.myfilter {
	-webkit-filter: saturate(0.9) contrast(1.2); 
	filter: saturate(0.9) contrast(1.2);
<div class="myfilter">
	<img src="..." />
<div class="myfilter">
	<iframe src="..."></iframe>

3.2 Add your image to the Tiles Exhibition


Filter Wizard Add image to Tiles Exhibition
Click on Streetview (1)


Filter Wizard Add image to Tiles Exhibition
Click on the Walking Icon (2)


Filter Wizard Add image to Tiles Exhibition
Drag the Pegman Icon to a place on the map (3)


Filter Wizard Add image to Tiles Exhibition
Apply the filters to your image and then click „Add to Exhibition“ (4)


Filter Wizard Add image to Tiles Exhibition
Insert your Name (required) and optional a description (4) for your artwork and click on „Send“ (5)


Filter Wizard Add image to Tiles Exhibition
After sending your artwork, click on „Show“ to open the Tiles Exhibition in a new Window (7)


Filter Wizard Add image to Tiles Exhibition
That’s it!


  • Anonymous Artworks (can) be removed from the exhibition
  • If you don’t want to send your Artwork but saving the result, copy the HTML-Code. See step 5 / (6)

3.8 Browser Support

This tool uses CSS Filters, supported in the following browsers: Testing!

Not work in Internet Explorer 11

5. Updates

Version: 0.9.3 08.01.2016

  • Add your image to the „Tiles Exhibition“. Fig. 6 / (1).
  • Print your Artwork in the „Tiles Exhibition“.
    Filter Wizard Add Image to Tiles Exhibition

    Fig. 6filter-wizard-screen-09.jpg
  • Enhanced Mobile Version.
    Filter Wizard Mobile Version

    Fig. 7filter-wizard-screen-10.jpg

Version: 03.01.2016

  • Enhanced Streetview handling. Fig. 5 / (1).
    Filter Wizard Streetview Demo

    Fig. 5filter-wizard-screen-07.jpg

Version: 31.12.2015

  • Fixed color of working area
  • Added function „Switch background-color“ for better result avaliation. Fig. 4: You can switch the background-color of the working area (1). Click on the switch-icon (2).
    filter wizard switch working area background

    Fig. 4filter-wizard-screen-04.jpg
  • Technicolor Support
  • Print (Stylesheet). Works in Firefox. In Google Chrome not avaliable

6. Interfacedesign

Fig. 3: Not the best place for this menu (1) !

filter wizard ui

Fig. 3ui_01_menu.jpg

7. To-do List

  • Solving Bug: Copy to Clipboard in Safari
  • Solving various interface issues (Pri 1)
  • Add function: Save your, one style via cookie
  • and even more…

8. Related Links

8.1 About CSS Filters

8.2 Development


Leave a Reply