---
title: "Image Duotone VFX — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Sections. VFX Duotone WebGL Three.js Color Grading"
canonical: "https://framer.elliotli.dev/component/vfximageduotone"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Image Duotone VFX

# Image Duotone VFX

VFX Duotone WebGL Three.js Color Grading

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

![Image Duotone VFX preview image 1](https://framer.elliotli.dev/og/component/vfximageduotone/7dc56dc44e1ef9aa/1600x1200.jpg)

## Summary

VFX Duotone WebGL Three.js Color Grading

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bdadfxgh-H1nnApuhIXy2NJVujqQbvFkzI1JtJo)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=VFXImageDuotone)

### VFX Image Duotone

Transform your images with a classic duotone effect, powered by Three.js WebGL for smooth performance and stunning visuals.

### Features

**Custom Duotone Colors**

Map the shadows and highlights of your image to any two colors for complete creative control.

**Smooth Animation**

Add subtle movement to the effect with the Speed control for dynamic, living visuals.

**Multiple Image Fit Modes**

Choose from Cover, Contain, or Fill to control how your image displays within the component.

**Interactive Triggers**

Enable hover-based activation with optional invert logic for creative interaction patterns.

### Use Cases

**Brand Consistency** — Tint images to match your brand's color palette across your entire site.

**Artistic Direction** — Create a cohesive look across a grid of disparate images.

**Hero Sections** — Add dramatic duotone effects to hero images for visual impact.

**Portfolio Galleries** — Apply consistent color grading to showcase work professionally.

### Customization

**Image Settings**

\- Image: Choose your image source

\- Image Fit: Select Cover, Contain, or Fill display mode

**Color Settings**

\- Color 1: Set the shadow/dark tones color

\- Color 2: Set the highlight/light tones color

**Animation & Trigger**

\- Trigger: Choose Always or On Hover activation

\- Invert Hover: Flip the hover logic when trigger is set to Hover

\- Speed: Control animation speed (0 for static, up to 5 for fast)

### Quick Tips

**Best Colors** — High contrast between Color 1 and Color 2 creates the most dramatic duotone effect. Try complementary colors for bold results.

**Static vs Animated** — Set Speed to 0 for a clean, static duotone. Increase speed for subtle color shifts that add life.

**Hover Effects** — Use Hover trigger with Invert to reveal the original image on hover while showing duotone by default.

**Image Quality** — Use high-resolution images for best results with the WebGL shader.

### License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

### Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

### Why Designers Love This

VFX Image Duotone gives you the power to apply professional-grade color grading with zero design software required. The WebGL-powered effect runs smoothly on all devices, and the intuitive controls make it easy to achieve stunning results in seconds.

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

-   All · #11244

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-02-10
- **Updated**: 2026-05-18
- **Added**: 2026-01-09
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove