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
3
votes
0 answers

mix-bland-mode property prevents fully 3D transforms in Google Chome

I've encountered a very strange bug in Google Chrome! if I use mix-blend-mode property on en element then if I apply transform: translateZ(50px); to an element below it, it doesn't work! Please see this: function threeD_hover(params) { …
Ershad Qaderi
  • 441
  • 4
  • 11
2
votes
0 answers

How to reverse color of child elements mix-blend-mode?

When I use "mix-blend-mode" for an element, but I want the span of the element to not be discolored? So is there any solution? a { width: 160px; height: 160px; margin: 0 auto; border-radius: 100%; background-color: #000; …
Yoshimi Le
  • 21
  • 1
2
votes
1 answer

How to set text colour based on background colour?

I need to change the text colour based on the background colour. I can use mix-blend-mode: difference and filter: invert(1) to kind of achieve what I need but the colour isn't quite correct. For example, on this JSFiddle:…
nvaughan84
  • 463
  • 6
  • 13
2
votes
1 answer

I wand to use a svg with moxe-blend-mode over a video

I try to put a svg logo over a video clip (mp4) with mix-blend-mode: difference; It should be used in shopware 6. My css: #gr-logo svg path { mix-blend-mode: difference; } I also tried png, tried the blend mode on containers and so on... The same…
Thomas Högg
  • 23
  • 2
2
votes
1 answer

reverse color of buttons on a background with text

I try to create a set of nav buttons that look like this I was trying with mix-blend-mode but had no success. Would anyone have a suggestion on how I should achieve this? So far I did this .nav { display: flex; justify-content: center; …
istvan weisz
  • 55
  • 5
2
votes
2 answers

mix-blend-mode is not working in phone browser

I used mix-blend-mode css property in my code. It is working on chrome desktop browser but not working on my phone chrome browser. I have used mix-blend-mode: screen; property for div fire1,fire2,fire3 images. What am I doing wrong? Please Help…
Sourav Kumar
  • 21
  • 3
2
votes
1 answer

CSS: How to cut out text on a blurred background?

i wanted to recreate the following style I came up with the following The problem is that the cut does not effect the blur filter and i have no idea how to solve it. This is my HTML code: .glass { width: 40%; height: 100%; position:…
encoded
  • 25
  • 3
2
votes
1 answer

mix-blend-mode sticky position

I'm trying to get my Hello World to be affected by the red background color as it slides behind, how can this be achieved, if possible at all? The text should change color as the below element slide behind the text body { height: 150vh; …
user18249902
2
votes
0 answers

How to replace mix-blend-mode on SVG element in Safari?

I have HTML with SVG element:
levensta
  • 147
  • 1
  • 9
2
votes
0 answers

Mix-blend-mode ignored after zoom [Safari]

Setup & Goal I am trying to apply a texture to all the content on my page. The aim is to make the site look like a piece of printed paper. In order to achieve that, I am using an absolutely positioned div with the same dimensions as my content. It…
kacase
  • 1,993
  • 1
  • 18
  • 27
2
votes
1 answer

Elements using mix-blend-mode break when implementing Slick Slider

I'm building a site locally (so I can't show it here) that has elements that apply mix-blend-mode: screen; when hovered on. They're images within slides in a slideshow that I'm using Slick for. When I implement Slick to run the slides, the blend…
samseurynck
  • 113
  • 1
  • 10
2
votes
1 answer

Mix blend mode in reversing colors

I have got the following code where when black segment overlap black points I want to change black points color to white and also when the rectangle when you hoover one of the points will change the color partially if overlaps the segment. I tried…
Obsesie
  • 171
  • 2
  • 14
2
votes
1 answer

CSS mix-blend-mode + JS

So I have a custom js cursor ( which follows the mouse cursor with a delay ) which has a background color of #000 and mix-blend-mode set to difference. My body background color and text is set to #fff. Now, I have a p tag with the text "HELLO" which…
Policsek
  • 191
  • 2
  • 2
  • 9
2
votes
2 answers

Mix-blend-mode working when applied to one element but not another

I am using mix-blend-mode on css-generated content to create a multiplied background effect. When I apply this generated element to an outer wrapper it has the intended effect: .standard-cover { background: blue; color: #fff; position:…
Matt
  • 21
  • 2
2
votes
1 answer

Mix-blend-mode bug on text

I am working on a knockout text using mix-blend-mode property. When I open the console to use Developer tools to test responsiveness, there are little lines that appear and disappear above and below of the blended text. On every selection, I do on…
Leo
  • 1,051
  • 2
  • 13
  • 33
1 2 3
…
12 13