How to Easily Create Duotone Images for the Web

A duotone image is one that use halftone colors to modify the image. This is done by superimposing a foreground halftone color with a contrasting background halftone color, which brings out the middle tones of a image as well as the highlights. With the CSS Duotone Generator, you can generate code for a customized duotone image that you can use in your own website.
The web app has the following settings: File Name
To upload an image to the app, click the Choose File button and select a file from the dialog box. You can also click Get random image if just want to test out the app with images it provides. Zoom
The Zoom slider lets you scale the image. Spacing
The Spacing slider lets you scale the image while maintaining the dimensions of the original image. Blur
The Blur slider lets you apply a Gaussian blur to the image. Image Opacity
The Image Opacity slider lets you adjust the image's transparency. Image Color
The Image Color button lets you change the foreground halftone color. Image Blend Mode
The Image Blend Mode dropdown box lets you change the way the image is combined with the foreground halftone color. Options are similar to those available in Photoshop. Background Color
The Background Color button lets you change the background halftone color. Background Blend Mode
The Background Blend Mode dropdown box lets you change the way the image is combined with the background halftone color. Options are the same as those available for the Image Blend Mode. Premade Settings
The app comes with some premade settings that will let you quickly achieve a certain look. These settings include: Spotify Vintage Blade Runner Law & Order Moody Randomize
After clicking the Generate HTML & CSS button, you HTML and CSS code will appear in a modal dialog box. For more information click here https://cssduotone.com.