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.