# CSS3 Blend Mode Test

A CSS Blend Mode testing platform, to test out different blend modes through HTML canvas and save the results for later. This will not work in IE.

Click Here to see how to use it or learn more about this project on my site

### Image Test

Choose File

- 50x50
- 100x100
- 150x150
- Original

### CSS Styles

Current Blend Style: Normal

×

### Instructions

Here's how to use it:

1. Click the bottom left box that has a checkered background and has the arrow to the right of it.
2. A box will appear. This is our Color Picker . Click around and find a color that you like.
3. After you pick your color that you like, click the button that says "Choose".
4. Next, a new button will appear that says "Choose File". Click this button and pick an image that you'd like to use
5. You will now see your image, probably stretched in some way, in the left side and in a bunch of boxes on the right. The right side shows all of the blend modes. Click on any of the boxes to see the effect on the left.
6. Voila! You've made your first blend mode image test.

### Like the image?

You can save your result in any of the following sizes: 50x50, 100x100, 150x150, and that canvas size. To do so, follow the instruction below:

1. Click the button to the right of the "Choose File" button that has the arrow on it. This is the "Download File" button.
2. Choose what size you want.
3. A box the size you selected will appear with your image in it. Right click on the image, click "Save Image" or "Save Image As".
4. Navigate to the folder where you want to save your new image, name then image, then click "Save image as".