<blend-mode>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

O tipo básico de dados CSS <blend-mode> (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades background-blend-mode e mix-blend-mode.

Para cada pixel sobreposto, o blend-mode obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.

Syntaxe

O tipo básico de dados <blend-mode> é definido usando uma palavra chave escolhida da lista abaixo.

Valores

normal

A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo. O efeito é como duas folhas de papel opacas se sobrepondo.

multiply

A cor final é o resultado da multiplicação das cores de cima e de baixo. Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final. O efeito é como duas imagens impressas sobrepostas em um filme transparente.

screen

A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado. Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca. O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.

overlay

A cor final será o resultado de multiply, se a cor de baixo for mais escura ou screen, se a cor de baixo for mais clara. Este blend-mode é equivalente a hard-light mas com as camadas invertidas.

darken

A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.

lighten

A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.

color-dodge

A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima. Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa. Este blend-mode é similar a screen, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.

color-burn

A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final. Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta. Este blend-mode é similar ao multiply, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto.

hard-light

A cor final é o resultado do multiply se a cor de cima for a mais escura, ou o resultado de screen se a cor de cima for mais clara. Este blend-mode é equivalente ao overlay mas com as camadas invertidas. O efeito é o de iluminar o fundo com um holofote muito forte e intenso.

soft-light

O resultado final é similar ao de hard-light, porém menos intenso. O efeito é o de iluminar o fundo com um holofote difuso.

difference

The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color.

exclusion

The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color.

hue

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

saturation

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.

color

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.

luminosity

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped.

Interpolation of blend modes

Changes between blends mode are not interpolated. Any change occurs immediately.

Specifications

Specification
Compositing and Blending Level 2
# ltblendmodegt

Browser Compatibility

BCD tables only load in the browser

See also