Stack Overflow
Stack Overflow

Questions tagged [mix-blend-mode]

The mix-blend-mode is a CSS property that sets how an element's content should blend with the content of the element's parent and the element's background.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

https://drafts.fxtf.org/compositing-1/#mix-blend-mode

193 questions
0
votes
1 answer

Mix Blend Mode is not working on iPhone and iPad browser

I am working on a website project. I put the image and set mix-blend-mode: screen. It works well on all browsers except iPhone and iPad browser. Please let me know solution. Thanks & Regards. I am not sure why this happen in only iPhone and iPad web…
Lee
  • 1
  • 1
0
votes
0 answers

How to mask using mix-blend on a dark screen CSS

I am trying to mask a picture on a screen that has 2 modes. A light theme and a dark theme. However, mix-blend screen seems to only work on light themed backgrounds and messes up on dark backgrounds. There is only a slight silhouette on the image.…
Squish
  • 419
  • 4
  • 22
0
votes
0 answers

CSS mix-blend-mode: Browser/Display Inconsistency

I utilize the mix-blend-mode property on my portfolio site to achieve a fun effect with the landing page headline. I am using the multiply value to blend 3 layers that are cyan, magenta, and yellow. Where they overlap I would expect the result to be…
Dean N
  • 31
  • 1
  • 4
0
votes
1 answer

Is this possible with blend mode or clip path?

enter image description here I've attached an image. It has one pink circle and a pink arrow. When the pink arrow moves towards the circle, can the overlapping part be displayed in white? (I'm making an animation where the overlap is colored white…
유대경
  • 1
  • 1
0
votes
1 answer

Can you use Pin Light in CSS?

I know we can use mix-blend-mode in CSS, but the Pin Light blending mode that is in Photoshop doesn't seem to be an option on web browsers. Is there a work around to get the same effect? Thank you.
Eric Sayag
  • 45
  • 5
0
votes
0 answers

mix-blend-mode doesn't working with animation over it

I have this codepen example: https://codepen.io/levai-ferenc/pen/bGLYVOr
@keyframes alpha_buildIn { 0% { opacity: 0; -webkit-opacity: 0; …
Levai Ferenc-Tibor
  • 21
  • 4
0
votes
0 answers

Is there any way to make the blend-mode rule to work in tandem with CSS animation?

I'm encountering an issue when I try to apply the animation CSS rule in tandem with the blend mode. If I'm using the mix-blend-mode without the animation rule (animation: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal both running…
Alex Raţiu
  • 107
  • 1
  • 12
0
votes
1 answer

What is wrong with my mix-blend-mode code snippet?

I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code…
hencubed
  • 11
  • 2
0
votes
1 answer

How to make magenta, cyan and yellow to give black with css mix-blend-mode multiply?

I am trying to multiply magenta, cyan and yellow with mix-blend-mode in css, but it gives me brown instead of black. what I want : Working mix-blend-mode what I have : Non-working mix-blend-mode In Figma it was working well, what am I doing wrong…
Léalbatroz
  • 101
  • 1
  • 3
0
votes
1 answer

How to change color of fixed element depending on the color of background content?

I have a fixed element and a lot of different content on the page. I need this fixed element to become black or white, depending on the dominant color on it's back when scrolling.  How to do it?  I don't know what height page sections would be, what…
nosdmitry
  • 5
  • 2
0
votes
0 answers

Implement a Photoshop Photo Filter on CSS

I want to recreate the result of Photoshop Photo Filters on css but not really sure which mix-blend-mode to use and how. I know this is a fairly trivial task, but I still need a little hint. Ideally, I would like to combine these two filters into…
A-off
  • 11
  • 1
  • 1
  • 6
0
votes
1 answer

More control over colors in mix-blend mode

I've been trying all day to find a solution to colorize text when a slanted element is over it. I have partially solved this with mix-blend-mode. But I don't like that you don't have a full control over the colors. The buttons should be available in…
Budi
  • 678
  • 2
  • 6
  • 27
0
votes
1 answer

Svg image inside colored

I have a SVG file with mix-blend-mode styles defined on specific elements. The blend applies correctly to the other elements inside the SVG, but not to the containing HTML
background color. Example: