Image Duotone VFX

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.