Home / Color and Light / Duotone
Duotone CSS Template, Free with Live Demo
Free duotone website template for a film festival. Any image becomes two colors with CSS blend modes, in a bold poster layout. Live demo. The example is Harbor Film Festival.
What is duotone?
Duotone turns an image into just two colors, one for the shadows and one for the highlights. Spotify made it famous, and it is still one of the fastest ways to make mixed photos look like one brand.
The trick uses two blend modes. The image is made grayscale and multiplied over the light color, then a layer of the dark color is placed on top with lighten. Change two CSS variables and you get a new palette.
Good for
- Film and music festivals
- Event and conference sites
- Brands with photos from many sources
- Poster style campaign pages
What you get in this template
- Duotone effect on any image or SVG with pure CSS
- Palette set by two CSS variables per image
- Big Bebas Neue poster headline
- Split hero with a lighthouse scene
- Three featured films, each in its own palette
The key CSS
This is the part that makes the duotone look work. Copy it into your own project.
.duo { position: relative; background: var(--light); }
.duo .src { filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.duo::after {
content: ""; position: absolute; inset: 0;
background: var(--dark);
mix-blend-mode: lighten;
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make a duotone image in CSS?
Put the image in a box with the light color as background, make the image grayscale and set mix-blend-mode: multiply. Then add a layer in the dark color with mix-blend-mode: lighten on top.
Does it work with real photos?
Yes. Replace the SVG with an img tag using the same .src class. Photos with good contrast work best.
Can I change the colors per image?
Yes. Set --dark and --light on each .duo element, as the film cards in this template do.
More Color and Light designs
041. Aurora Gradient
Solace, a skincare brand
043. Monochrome
Atelier Verde, an architecture studio
044. Dark Mode First
Ledgerly, a budget app
045. Neon Cyberpunk
Voltage Arena, an esports tournament
046. Earthy Natural
Rootstock Farm, an organic veg box
047. Pastel Dream
Cloud Nine, a baby clothing shop
048. High Contrast Accessible
Brookfield Council, a local government site
049. Grainy Gradient
Late Signal, a podcast