The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Blending with partially transparent images

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #201325

    I am trying to make UI elements that can change color at runtime, but I am having trouble getting transparent images to work like I want them to.

    Using background-blend-mode: multiply works exactly like I want for opaque images, but fails for partially transparent images, leaving a colored square around the image. I also tried using filter: hue-rotate(), but that does not give the correct color.

    I am using SVG images, and am not opposed to changing how I place them in the HTML. I would try editing the SVG at runtime, but they tend to be more complex than simple shapes, and the ones I receive tend to have rasterized effects.

    See for an example of what I have tried.


    No one has any ideas? Is it just not possible with CSS?



    what do you expect actually ?

    What is the purpose of background-color here ?


    The goal is to have partially transparent UI elements that can change color at runtime. I dont necessarily have to use background-image/background-color if there is a solution using something else.

    Multiply is the preferred blend mode, and I need it to respect the alpha for the final output. See my codepen from my first post. The circle with “Goal” was done in photoshop to show what I want.


    I finally got an answer from somewhere else.

    Webkit has -webkit-mask-image that I can use to mask out the fill from the color

    #button {
        background-image: url("");
        -webkit-mask-image: url("");
    .ui-el-center {
        background-color: @mainColor;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        background-blend-mode: multiply;
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.