Adding Duotone to your images in Webflow
This is a quick project to demonstrate how to quickly add a duotone effect to images on your Webflow site using a small amount of CSS.
The Structure
To get this to work, all you'll need is 3 things:
- An image
- A div (to put the image in)
- A little bit off CSS
The Code
The good news is that you don't really need any CSS knowledge to use this, just copy and paste the code below into your page or site header and I'll show you how to make any needed modifications.
<style>
.img-wrapper img {
mix-blend-mode: multiply;
}
.img-wrapper::before {
background-color: #changethis;
bottom: 0;
content: '';
height: 100%;
left: 0;
mix-blend-mode: lighten;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
</style>
Copy that little bit of code and paste into your page or site settings, based on your needs:
- If you only need duotone on one page or a small number of pages, you can just add it to your page settings in the Inside <head> tag field.
- If you plan on using the duotone effect on several pages, or even all pages, then you'll want to place it in your project settings in the Inside <head> tag field.
Setting your first duotone color
In the CSS snippet shared above, you might notice a tomato-colored box that says #changethis. You need to change this.
This is where you're going to put the hex code, RBG value, or name for your first color, the color that will take up the darker part of your image.
Setting up the image & div block
As I mentioned before, for this step you'll need 2 things:
- An image
- A div block to put the image in
Here's what you do:
- Place the div block wherever you want your image to appear on your site.
- Give your div block a class of img-wrapper.
(If you change this, just be sure to change the name in the CSS as well) - Add an image element inside of your freshly-named img-wrapper
- Give your image a class. Any class name on this element should be fine, but I used img as the name because I felt like it.
Styling the image & div block
- Select your img-wrapper
- Set its Position to Relative
- Set its Background Color to your desired highlight color.
- Select your image
- Set its Width to 100%
- Set its Position to Relative
- Add a Filter of Grayscale at 100%
Congrats, you're done!
Now what?
Now you can publish your site, and you should see your fancy new duotone image right on your live site!
Remember, since we're using custom code, you won't see the duotone effect in the Designer, you'll only be able to see it on the published live site.
If you have any questions on setting this up, or run into any issues, feel free to reach out to me at zach@avengr.co and I'll answer any questions I can!