No. It is a live preview, so the output is what you see on screen. Note the color, opacity and mode, then write the declaration yourself.

Which mode should I use to tint a photo without losing detail?

The color mode. It keeps the photograph's luminance and takes the overlay's hue and saturation, so texture and contrast survive the tint.

Does it change my original image?

No. The overlay is a rendering layer placed over the image, so the file on your disk is untouched.

Which comes first, the blend mode or the opacity?

The mode decides how the layer and the image combine; opacity decides how much of that result shows. So pick the mode for character and use opacity for strength — a mode that already darkens does not need much opacity to go too far.

Color Overlay Generator

Q: How many blend modes are available?

Thirteen: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color and luminosity.

Drop an image here, or click to upload

PNG, JPG, WebP, GIF

You Might Also Need

Overlay Color Generator

Generate overlay colors for images and video

CSS Border Color Generator

Design CSS borders with custom colors

Image Theme Generator

Generate a UI theme from an image

Gradient Overlay Generator

Layer a gradient over an image

The color overlay generator lays a colored layer over your image with thirteen CSS blend modes and an opacity slider, previewing exactly what the browser will render.

What is Color Overlay Generator?

The color overlay generator puts a colored layer over an image and lets you tune it until it looks right. Drop in a picture, choose an overlay color, set an opacity from zero to one hundred percent, and pick one of thirteen blend modes; the preview updates as you change anything. It answers a question that comes up constantly in layout work, which is what a photograph looks like when a brand color is washed across it, without you having to write the CSS first and refresh a page to find out. Treat it as a live mix blend mode preview and the workflow makes sense: every adjustment is rendered immediately, by the same engine that will render it in production.

The blend modes are the browser's own, not an approximation of them: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color and luminosity. The preview applies your color as a layer with the chosen mode, so what you see on screen is what the same declaration renders in a stylesheet. That fidelity is the whole reason to do the experiment here rather than in an image editor, because an editor's blend maths can differ slightly from the browser's.

The modes fall into recognisable families. Multiply darkens and tints, which is why it is the usual default for a header image that needs to sit behind white text. Screen goes the other way and lightens. Overlay and soft-contrast modes increase contrast by pushing midtones apart. The four that move colour rather than tone are the interesting ones: hue, saturation, color and luminosity each transplant one property of your overlay while keeping others from the photograph. Choosing color, for example, keeps the photo's luminance — its texture, highlights and shadows — while adopting the overlay's hue and saturation, which is the classic way to tint an image without losing detail.

Opacity and blend mode do different jobs, and separating them helps. The mode decides the formula, and the opacity decides how much of that result you actually see, from nothing at zero percent to the full effect at one hundred. Starting with multiply at around forty percent is a sensible first pass for a hero image; if the tint looks flat, the colour modes often give a richer result at a similar strength. Replacing the image resets to the dropzone without losing your settings.

The main limit is that this is a preview rather than an exporter.
There is no CSS snippet and no download button, so the way to capture the effect is to note the three settings and write them yourself, or take a screenshot.
That is worth knowing before you invest time in fine-tuning.

It is also worth remembering that a blended overlay is a rendering effect, not a change to the pixels. The original file is untouched, which is good for reuse but means you cannot export a flattened result from here. If you need the image itself modified rather than a layer over it, an image recolouring tool is the right kind of tool.

Used as an image color overlay experiment, it is fast and honest: pick a value, drag the opacity, cycle the modes, and settle on the pairing that keeps the subject readable.
The three settings are all a stylesheet needs, which makes this a cheap way to explore an effect that is otherwise fiddly to iterate on.
It pairs naturally with the duotone generator when two colours are wanted rather than one, and with a contrast checker when the overlaid image has to carry text on top.
If the aim is to tint a photo with css blend modes and then reproduce the effect in a stylesheet, the three settings shown here are the entire recipe.

How to use Color Overlay Generator

Drop an image onto the upload area.
Choose the overlay colour with the colour field.
Set the overlay's opacity with the slider.
Pick a blend mode and judge the result in the preview.

When to use Color Overlay Generator vs related tools

Use this tool to preview how an overlay color and blend mode will look over an image before writing the CSS. Use an image recolouring tool when the pixels themselves need to change. When the effect should be a whole-image treatment rather than a layer, the duotone generator maps the photograph onto two colours, and a tint that only has to fade is the transparent gradient generator's scrim.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.