---
title: "Duotone — Free Framer component · Best of Framer"
description: "Free Framer component · by Ismael Martínez · Backgrounds. Duotone component into your canvas."
canonical: "https://framer.elliotli.dev/component/duotone"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Duotone

# Duotone

[View on Framer](https://framer.com/marketplace/components/duotone/?via=elliot-li)

![Duotone preview image 1](https://framer.elliotli.dev/og/component/duotone/f6d2e0c1163bff5f/1600x1200.jpg)

## Summary

Duotone component into your canvas.

## Description

Add a **Duotone** effect over images in Framer in three simple steps:

1.  Drop the Duotone component into your canvas.
2.  Choose an image.
3.  Select the colors.

You can choose the resize mode: Fit or Fill.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7640

## Details

- **Author**: Ismael Martínez
- **Published**: 2025-08-06
- **Updated**: 2026-03-20
- **Added**: 2025-08-03
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background