Filter Gradient on image without double Image

Question

is it possible to have a smooth gradient filter (CSS or SVG) to darken specific parts of an image.

Of course I could create a div apply a linear gradient from black to transparent to it and then set the opacity to 0.4 for example. This is the solution I have right now.

But in my opinion brightness css filter or feComponentTransfer svg filter darken the image way more natural. But I don't want to darken the whole image just parts of it and as described smooth out like a gradient from dark to transparent.

And on top I could of course create this with two images, but I ask myself if it is possible with one image.

Thank you very much for the help in advance.

Best regards Chris

Answer 1

You can do this a few ways - this is the easiest and works cross browser. You define a black/white gradient in the content and import your image via feImage. Then you multiply the gradient with the image (feBlend), clip the gradient to the image with feComposite, and add a feColorMatrix to increase overall brightness (change those 1.5's to whatever you want). Thumbnail of the before is in the corner there.

Of course this means you have to do this within a SVG element. There are ways of doing this as a standalone filter but they might not work in Safari iOS - which (last time I checked anyway) won't let you do feComposite in a filter applied to HTML content.

    <svg viewBox="0 0 700.000000 700.000000">
        <defs>
          
       <linearGradient id="prog-grad" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="white"  />
  <stop offset="100%" stop-color="black" />
</linearGradient>
          
           <filter id="prog-darken" x="0%" y="0%" width="100%" height="100%" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
               <feImage x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/DandelionFlower.jpg/1280px-DandelionFlower.jpg" preserveAspectRatio="xMidYMid slice" result="image"/>
             <feBlend mode="multiply" in2="SourceGraphic" />
             <feComposite operator="in" in2="image"/>
             <feColorMatrix type="matrix" values="1.5 0 0 0 0  0 1.5 0 0 0  0 0 1.5 0 0   0 0 0 1 0"

           </filter>
        </defs>

      
            <rect id="gradient" x="0%" y="0%" width="100%" height="100%" fill="url(#prog-grad)" filter="url(#prog-darken)"/>
          <image x="80%" y="0%" width="20%" height="20%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/DandelionFlower.jpg/1280px-DandelionFlower.jpg" preserveAspectRatio="xMidYMid slice"/>
   
    </svg>