Utility extension · Free
Tint any Elementor 4 Image or SVG with a brand colour or a two-colour gradient, set the opacity and a blend mode, and keep links clickable. Free, set from the element's own panel.
The short answer
Image Overlay is an Animation Addons for Elementor extension that adds an Elementor image overlay color or gradient to Image and SVG elements in Elementor 4. You choose a solid colour or a two-colour gradient with an angle, set the opacity, and pick one of 16 blend modes. The image file itself is never changed.
| Plan | Free |
|---|---|
| Type | Utility (panel section) |
| Works on | Elementor's Image and SVG elements |
| Main controls | Enable Overlay, Overlay Type (Color or Gradient), Color, Gradient Color 1, Gradient Color 2, Gradient Angle (0–360°), Opacity (0–100), Blend Mode, Enable in Editor |
| Defaults | Color #000000, Opacity 50, Blend Mode Multiply; gradient #000000 to #ffffff at 180° |
| Blend modes | Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity |
| Engine | Plain CSS on an overlay layer, no GSAP |
| Editor preview | Updates on the canvas as you change settings; Enable in Editor adds a preview button |
| Licence | None: part of the free plugin, works without Animation Addons Pro or Elementor Pro |
| Limits | Image and SVG only (not Elementor's Video or AAE's Post Image); a static tint with no hover change |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with Image Overlay, free in Animation Addons, on Elementor 4's own elements. The settings on each card are a good place to start.
A row of four team photos taken in different rooms, all unified by the same navy tint.
A black-and-white concert photo turned into an orange-and-violet duotone behind a big headline.
Bright, mixed-light pastry photos given the same dark-to-clear wash from the bottom edge, so a menu grid reads as one shoot.
Three line illustrations from a stock pack, recoloured to the brand green with one setting each.
A grid of linked project thumbnails, each with a soft violet wash; the links still open the case study.
Clinical treatment-room photos softened with a pale teal gradient so they match the brand's calm palette.
Features
Every point below is a real control in the Image Overlay panel section or part of how it works. Nothing here needs custom code.
The overlay belongs to the Image or SVG element, so you don't add a Div Block just to hold a background overlay, and your layout stays one element deep.
Overlay Type switches between Color and Gradient. A gradient takes Gradient Color 1, Gradient Color 2 and a Gradient Angle from 0 to 360°.
Blend Mode offers the same list as Elementor's Mix Blend Mode, so duotones and recolours need no image editor.
Every setting except Enable in Editor can change per breakpoint, Opacity included. Switch the overlay off on mobile, or use a lighter tint there.
Image Overlay is a static style, not an animation. It needs no GSAP and its small script is added only to pages that use it.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Download freeInstall and activate Animation Addons for Elementor and open a page in the Atomic Editor.
Select an Image or SVG element.
Open the Image Overlay section in its panel and switch on Enable Overlay.
Choose Overlay Type: set Color, or set Gradient Color 1, Gradient Color 2 and Gradient Angle.
Adjust Opacity and pick a Blend Mode; use the device switcher for per-device changes.
Check the canvas and the front end, then publish.
Honest comparison
What each option has, side by side. Where the other choice is the better fit, we say so.
| Feature | Elementor 4 (Background on a container) | Animation Addons Image Overlay |
|---|---|---|
| Colour or gradient overlay | Yes, on containers through the Background control | Yes, on the Image or SVG element itself |
| Extra wrapper needed for an Image | Yes, a Div Block or Flexbox around it | No |
| Blend modes | Mix Blend Mode on the element (16 modes) | Blend Mode on the overlay only (same 16 modes) |
| Needs Elementor Pro | No | No |
Compared with Elementor 4.3.3 (September 2026).
If your image is already a container background, Elementor's own Background control handles the tint well. Use Image Overlay when the picture is an Image or SVG element, for example a linked thumbnail, a portrait in a card or an illustration, and you want the tint without an extra layer.
Who it's for
The people who get the most out of it, and what they use it for.
Unifying mismatched client photos into one brand look.
Making duotones and recoloured illustrations without an image editor.
Calming busy photos into one palette.
FAQ
Install the free Animation Addons for Elementor plugin, select an Image or SVG element and open its Image Overlay section. Switch on Enable Overlay, keep Overlay Type on Color, choose a Color and set Opacity. Animation Addons Image Overlay places the tint over the image, with Multiply as the default Blend Mode.
In Animation Addons Image Overlay, set Overlay Type to Gradient, then choose Gradient Color 1, Gradient Color 2 and a Gradient Angle between 0 and 360 degrees. Opacity controls how strong the gradient is, and Blend Mode controls how it mixes with the photo. Screen gives bright duotones; Multiply darkens.
No. Animation Addons Image Overlay attaches to Elementor's Image and SVG elements. For a Flexbox, Div Block or Grid with a background image, use Elementor's own Background control, which already has colour and gradient overlays. Use Image Overlay when the picture is a separate Image element, such as a card photo or a linked thumbnail.
Animation Addons Image Overlay works on Elementor's Image and SVG elements only, and the tint is static, with no hover change. It is part of the free plugin, so no Animation Addons Pro or Elementor Pro licence is needed. The overlay updates on the editor canvas as you change settings; Enable in Editor adds a preview button.
Yes. In Animation Addons Image Overlay, Enable Overlay, Overlay Type, the colours, Gradient Angle, Opacity and Blend Mode can each be set per breakpoint. Switch Elementor's device mode to Mobile and turn Enable Overlay off, or lower the Opacity there so the photo reads more clearly on small screens.
No. The Animation Addons Image Overlay layer ignores mouse clicks, so a linked Image or SVG underneath still opens its link. It adds no text to the page, so the image's alt text stays exactly as you set it for screen readers and search engines.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Image Overlay on the same page or template.
Reveal, scale or stretch the tinted image on scroll (Pro).
Show a floating image that follows the cursor over a list or card (Pro).
Add CSS filters such as greyscale the panel doesn't offer, free.
Clip a container holding the image to a circle, blob or your own SVG.
Project grids where a consistent tint pulls mixed thumbnails together.
Free on Elementor Free, with gradients, 16 blend modes and per-device settings.
