Skip to content

component

Image Overlay Effect

By Ava Thiery

Details

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 Drop Image Overlay Effects onto your canvas. Set your Base Image (photo, render, product). Set an Effect Image (grain, pattern, gradient). Choose a Blend Mode and adjust Opacity . Notes & tips Multiply is great for grain on bright images; Screen/Overlay can lift darker shots.

Introduction

Create infinite effects

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200124948/148/228/309/79/15
  • All · #2494