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

CSS isolate image from mix blend mode difference

I am applying a dark mode effect on HTML using mix-blend-mode: difference. Everything is ok, except for images, that are also affected by the overlay. I have tried to isolate the elements using: img { isolation: isolate; } or inside a…
Cristi Ghinea
  • 474
  • 1
  • 7
  • 20
0
votes
0 answers

Remove or blend background of video using CSS?

I am trying to make the solid background of a HTML5 video blend in with the background of the page. I've tried using mix-blend-mode though the vide stays same. Is there a way to do this via CSS? Here is the jsfiddle (the video background should be…
auto
  • 1,062
  • 2
  • 17
  • 41
0
votes
2 answers

mix-blend-mode not working with elementor wordpress website

As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of…
JaxAshwood
  • 1
  • 1
0
votes
1 answer

Safari: mix-blend-mode luminosity not working correctly

I have a mix-blend-mode for one of my images that works perfectly on firefox and chrome, but not on safari. The overlay is on a CSS slider I have and I found transform messes up the mix-blend-mode property. How do I avoid having the transform…
Jamie
  • 1,909
  • 3
  • 22
  • 47
0
votes
1 answer

Printing SVG which uses mix-blend-mode multiply

I have an svg which uses mix-blend-mode: multiply. This svg is generated programmatically in the browser using JS.
Shane G
  • 3,129
  • 10
  • 43
  • 85
0
votes
2 answers

How to make a text black but white above an svg image using css mix-blend-mode

I have a text and svg image, I want to make the text with black color, but the parts above the svg image with white color. So the image will be a mask. Here is my try .bg{ position:absolute; top:0; z-index:-1; } .p{ color:black; …
Zuhair Taha
  • 2,808
  • 2
  • 35
  • 33
0
votes
0 answers

Wordpress mix-blend-mode affecting child div

I'm trying to port a Photoshop mockup into my Wordpress theme. I want the portfolio image to get a "mixed-blend-mode: multiply layer with a green color" on hover. The H3 text in the child div "vert-center" gets affected by the mix-blend-mode and I…
Martei
  • 5
  • 6
0
votes
1 answer

Why does CSS mix-blend-mode "darken" produce a different result than Photoshop?

As far as I understand, CSS' mix-blend-mode is supposed to behave the same way as Photoshop' Blend mode. However, in the following simple example I am getting different results and I am not sure why. Example A cyan rectangle (#00ffff) half…
Walmink
  • 167
  • 9
0
votes
1 answer

Animating scale on circle with centered text on top, with mix-blend-mode

I'm trying to animate a button that should have a black circle in the bottom layer with centered white text on top. The black circle should scale from full size to smaller size, while the text should use mix-blend-mode so that it stays white when…
tobiasg
  • 983
  • 4
  • 17
  • 35
0
votes
0 answers

Should inverted color in SVG only take account of itself or also other elements?

I get different results in different browsers for line { stroke: white; stroke-width: 10; mix-blend-mode: exclusion; } div { display: inline-block; background: rgb(231, 229, 218); }
…
Daniel
  • 3,383
  • 4
  • 30
  • 61
0
votes
1 answer

Exclude some part from background blend mode

I try to achieve effect similar to Photoshop multiply via code on my project. At the same time i try to exclude some elements that are in child div to be affected by it (like text layers) - and i hit in the wall. Tried already adding additional…
Ganga
  • 787
  • 1
  • 9
  • 27
0
votes
1 answer

Mix-Blend-Mode Difference

I've tried to add the mix-blend-mode: difference; to „span“ but it doesn't work. This solution works: I add the blend mode instead „.caption span“ to „.caption“. But what I really need, is to put span in a div. Any ideas why? Thank you! .caption…
l00per
  • 481
  • 4
  • 7
  • 19
0
votes
1 answer

Using screen mix-blend-mode to get white when combining red green and blue divs

I am using the screen value of mix-blend-mode to combine three divs, one of each of red green and blue. I think I should expect white at the center of the combined divs, but the colours seem off. Am i misunderstanding how this works, or am I using…
Scott Marley
  • 459
  • 1
  • 5
  • 8
0
votes
0 answers

Mix Blend Mode Bleed

I have a div with some text and a background image I am blending in with mix-blend-mode: darken. However the background image is bleeding outside of the text. I am using Orbitron-Black as the font but I cannot see that making a difference! Here is…
Phillip Dews
  • 338
  • 6
  • 25
0
votes
1 answer

Animation lag due to mix-blend-mode property in Chrome

If you launch Chrome and check my fiddle in fullscreen mode, you'll see that the animations are laggy. The div lags a little while sliding down and the text lags a little while sliding up. If you resize the browser to be smaller the animations will…
brewpixels
  • 311
  • 1
  • 5
  • 19
1 2 3
…
12
13