Gradient On A Real Image Tag

Using Other Images As Masks Over This Image

Note that the masking image must have a solid color with transparency to work properly. Usually you would use black or white for the color of the positive area of the image. Unlike Photoshop, the area of the image WITH (any) color will let the main image show through, and any area with transparency BLOCKS that part of the main image from showing through. So, the area of the star above is white in the masking image, while all other areas are transparent. We can also use webp or svgs for the masking image--anything that supports an alpha (transparency) channel. Note that gradients or shades of grey on the non-transparent areas of the masking image DO NOT vary the transparency of the mask.

Using Other Images As Masks Over This Image With A Gradient

The masking image used here has a gradient background applied to its TRANSPARENT area (and goes from some color to transparent). Note again, that where there is positive gradient color, the MAIN image shows through more, and where there is just pure transparency, the MAIN image does not show through, which is the opposite of gradients in Photoshop.