---
title: "Image Overlay Effect — Free Framer component · Best of Framer"
description: "Free Framer component · by Ava Thiery · Effects. Image Overlay Effect merges a base image (photo/artwork) with a top “effect” image (grain, pattern, film dust, gradient, etc.)."
canonical: "https://framer.elliotli.dev/component/image-overlay-effect"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Image Overlay Effect

# Image Overlay Effect

Create infinite effects

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

![Image Overlay Effect preview image 1](https://framer.elliotli.dev/og/component/image-overlay-effect/4260c58898bf0244/1600x1200.jpg)

## Summary

Image Overlay Effect merges a base image (photo/artwork) with a top “effect” image (grain, pattern, film dust, gradient, etc.).

## Description

Image Overlay Effect merges a **base image** (photo/artwork) with a **top “effect” image** (grain, pattern, film dust, gradient, etc.). Using **opacity** and **blending modes**, you can craft any effect you need, like subtle film grain or a bold poster-style textures. Drop it into heroes, case studies, product galleries, or blog covers to keep your art direction consistent with just a few tweaks.

## Key features

-   **Two-layers:** Base image + Effect image (pattern/noise/texture)
    
-   **Blend controls:** Multiply, Screen, Overlay, Soft Light, Hard Light, Color Dodge & more
    
-   **Opacity slider:** Dial in subtle to dramatic looks
    
-   **Sizing modes:** Cover / Contain / Fill with position controls
    
-   **Responsive by default:** Looks great across breakpoints
    

## Great for

-   Hero sections with tasteful grain or gradient texture
    
-   Product shots with soft noise or halftone patterns
    
-   Case-study thumbnails with consistent art direction
    
-   Editorial/blog covers with layered poster effects
    
-   Portfolio grids with subtle brand textures
    

## How to use

1.  Drop **Image Overlay Effects** onto your canvas.
    
2.  Set your **Base Image** (photo, render, product).
    
3.  Set an **Effect Image** (grain, pattern, gradient).
    
4.  Choose a **Blend Mode** and adjust **Opacity**.
    

## Notes & tips

-   **Multiply** is great for grain on bright images;
    
-   **Screen/Overlay** can lift darker shots.
    

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

-   All · #3179

## Details

- **Author**: Ava Thiery
- **Published**: 2025-10-10
- **Updated**: 2026-06-08
- **Added**: 2025-10-06
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo