Meta tags:
description=Aprenda como a propriedade CSS background-blend-mode mescla imagens e cores de fundo. Abrange os 16 modos com exemplos práticos.;

Headings (most frequently used words):

de, propriedade, mesclagem, uma, css, background, blend, mode, referência, da, sintaxe, como, funciona, em, camadas, valores, entendendo, as, famílias, modos, exemplos, casos, uso, comuns, suporte, dos, navegadores, prática, normal, screen, color, dodge, multiply, overlay, darken, saturation, tingir, foto, com, cor, marca, criando, um, efeito, duotone, sobreposição, textura, recolorir, interativamente, ao, passar, mouse, quando, necessário, mesclar, elemento, inteiro,

Text of the page (most frequently used words):
#background (86), color (40), mode (38), blend (36), border (34), css (29), camada (29), style (29), html (28), uma (23), com (23), image (23), repeat (23), url (22), text (22), para (21), mais (21), div (21), width (21), font (20), #multiply (18), grid (18), png (17), que (16), aprender (15), copiar (15), position (15), media (15), default (15), body (14), head (14), uploads (14), 0001 (14), 400 (14), modos (13), camadas (13), imagem (13), fundo (13), inferior (13), column (13), w3docs (12), mesclagem (12), screen (12), sem (11), você (11), elemento (11), size (11), height (11), superior (11), light (10), bottom (10), top (10), break (10), propriedade (9), cor (9), right (9), left (9), animation (9), center (8), first (8), contraste (8), normal (8), foto (8), mesmo (8), stroke (8), como (7), áreas (7), experimente (7), 280 (7), 9ced3f2aae55e225cc0737bdb533a274bd004420 (7), https (7), api (7), 0710cad7a1017902166203def268a0df2a5fd545 (7), doctype (7), overlay (7), overflow (7), decoration (7), offset (7), flex (7), todos (6), page (6), transition (6), soft (6), matiz (6), canal (6), line (6), align (6), padding (6), margin (6), type (6), variant (6), sobre (5), exemplos (5), dos (5), entre (5), cinza (5), não (5), por (5), sombras (5), escuras (5), saturation (5), usa (5), saturação (5), luminosidade (5), darken (5), escuro (5), sempre (5), onde (5), resultado (5), dodge (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), prática (4), uso (4), valores (4), sintaxe (4), clip (4), modo (4), faz (4), hero (4), 4f46e5 (4), photo (4), jpg (4), fundos (4), escala (4), mescla (4), textura (4), cores (4), mantém (4), valor (4), pixel (4), qualquer (4), abaixo (4), luminosity (4), difference (4), hard (4), preto (4), letter (4), transform (4), fill (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), suporte (3), navegadores (3), casos (3), comuns (3), famílias (3), funciona (3), imagens (3), nunca (3), mesclar (3), página (3), use (3), mix (3), forma (3), card (3), hover (3), efeito (3), produzindo (3), shadow (3), duotone (3), enquanto (3), cada (3), escura (3), clara (3), canais (3), das (3), fontes (3), ficam (3), refletir (3), efeitos (3), hue (3), exclusion (3), lighten (3), burn (3), padrão (3), aplica (3), branco (3), lista (3), object (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), content (3), columns (3), auto (3), direction (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), desde (2), entendendo (2), referência (2), this (2), attachment (2), permite (2), define (2), fallback (2), simples (2), inteiro (2), opacity (2), filter (2), apenas (2), conteúdo (2), atrás (2), dele (2), sobreposição (2), quando (2), animável (2), recolorir (2), escolha (2), suave (2), sólida (2), duas (2), linear (2), gradient (2), ff6b6b (2), destaques (2), criando (2), tingir (2), preserva (2), útil (2), partes (2), aumenta (2), multiplica (2), transparentes (2), pretas (2), permanecem (2), adicionar (2), tintas (2), clareia (2), resultados (2), vívidos (2), claras (2), brilhos (2), vazamentos (2), luz (2), elas (2), dividem (2), hsl (2), são (2), produzem (2), invertidos (2), menos (2), úteis (2), clareamento (2), inverso (2), mas (2), meios (2), tons (2), versão (2), claro (2), fica (2), transparente (2), permanece (2), ela (2), the (2), fornecer (2), várias (2), layers (2), css3 (2), mesclam (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, 2014, next, previous, yes, was, helpful, verificar, determina, posição, múltiplas, misturem, controla, rolagem, ajusta, tamanho, mistura, supports, cover, then, enhanced, suportado, modernos, chrome, firefox, edge, safari, opera, internet, explorer, ofereceu, forneça, sensato, ambientes, legados, renderizam, empilhadas, normalmente, nenhum, erro, visível, ajustes, única, brilho, precisa, segunda, costuma, ser, solução, ferramenta, certa, desvanecer, próprio, precisar, exemplo, vidro, fosco, dentro, necessário, observação, estados, intermediários, portanto, transições, ocorrem, abrupta, interpolação, instant, switch, 10b981, altere, dinamicamente, criar, somente, interativamente, passar, mouse, geralmente, adiciona, desbotar, base, f5f0eb, noise, textured, funda, ruído, papel, editar, arquivo, recebe, destaque, quente, sombra, fria, clássico, visual, tonalidades, popular, seções, highlight, defina, dois, gradiente, outro, usando, indigo, brand, coloque, direcionar, direção, esse, absorvem, tinta, intensidade, marca, dessaturar, ressaturar, mantendo, paleta, compara, competem, prevalecem, aplicando, caráter, tonal, destaca, brancas, clássica, produz, alto, néon, reflexos, brilhantes, revelando, bom, suaves, frontal, desenhada, interação, seus, componentes, trocam, individuais, indicados, fotos, componente, psicodélicos, usados, principalmente, criativos, animações, diferença, exclusão, escurecem, clareiam, aumentando, geral, sutil, agressivo, brilhante, aprofundamento, adição, escurecimento, quatro, semelhante, menor, subtrai, idênticas, evita, bordas, duras, papéis, forte, aumento, escurece, intensificando, pinta, ocorre, visualmente, contexto, empilhamento, está, two, images, uses, second, diretamente, acima, dela, extras, ignorados, repete, início, até, tenha, pode, empilhar, aplicada, todas, aceita, separada, vírgulas, correspondem, ordem, seguintes, multiple, backgroundblendmode, dom, herdado, elementos, também, inicial, esta, explica, possui, reais, executáveis, significa, combinar, mesma, editores, tingindo, fundindo, outra, modificar, arquivos, aprenda, abrange, práticos, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, property, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, rotate, distance, fit, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, fullscreen, focus, enabled, disabled, dir, checked, active, seletores, selectors, propriedades, guia, flexbox, guides, gradientes, nomes, tabelas, links, class, introdução, basic, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
g break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css background blend mode aprenda como a propriedade css background blend mode mescla imagens e cores de fundo abrange os 16 modos com exemplos práticos a propriedade css background blend mode define como as imagens de fundo de um elemento se mesclam entre si e com a background color do elemento ela permite combinar fundos em camadas da mesma forma que editores de imagem mesclam layers tingindo uma foto criando um efeito duotone ou fundindo uma textura em outra sem modificar os arquivos de imagem esta página explica o que cada modo de mesclagem faz como a mesclagem funciona quando um elemento possui várias camadas de fundo casos de uso reais e exemplos executáveis o valor padrão é normal o que significa sem mesclagem referência da propriedade valor inicial normal aplica se a todos os elementos também se aplica a first letter e first line herdado não animável não versão css3 sintaxe dom object style backgroundblendmode luminosity sintaxe background blend mode blend mode multiple layers background blend mode blend mode blend mode copiar onde blend mode é um dos seguintes normal multiply screen overlay darken lighten color dodge color burn hard light soft light difference exclusion hue saturation color luminosity copiar como funciona a mesclagem em camadas um elemento pode empilhar várias camadas de fundo a lista de background image mais a background color aplicada abaixo de todas elas background blend mode aceita uma lista separada por vírgulas de modos que correspondem em ordem às camadas de background image se você fornecer menos modos do que camadas a lista se repete desde o início até que cada camada tenha um modo se você fornecer mais modos do que camadas os modos extras são ignorados a background color é sempre a camada mais inferior e se mescla com a camada de imagem diretamente acima dela two images the first uses screen the second multiply background image url top png url bottom png background blend mode screen multiply copiar a mesclagem ocorre apenas entre os fundos do mesmo elemento ela não mescla com conteúdo visualmente atrás do elemento no contexto de empilhamento para mesclar um elemento com o que está abaixo dele na página use mix blend mode valores valor o que faz normal sem mesclagem a camada superior pinta sobre as camadas abaixo padrão multiply multiplica os valores dos canais de cor o resultado é sempre mais escuro branco fica transparente preto permanece preto screen inverso de multiply o resultado é sempre mais claro preto fica transparente branco permanece branco overlay aplica multiply onde a camada inferior é escura e screen onde é clara aumenta o contraste darken mantém o pixel mais escuro canal por canal lighten mantém o pixel mais claro canal por canal color dodge clareia a camada inferior para refletir a camada superior produzindo destaques vívidos color burn escurece a camada inferior para refletir a camada superior intensificando as sombras hard light como overlay mas com os papéis da camada superior e inferior invertidos um forte aumento de contraste soft light uma versão mais suave de overlay preserva os meios tons evita bordas duras difference subtrai a cor mais escura da mais clara por canal cores idênticas produzem preto exclusion semelhante a difference mas com menor contraste os meios tons ficam cinza hue usa o matiz da camada superior com a saturação e luminosidade da camada inferior saturation usa a saturação da camada superior com o matiz e a luminosidade da camada inferior color usa o matiz e a saturação da camada superior com a luminosidade da camada inferior a forma padrão de tingir uma foto em escala de cinza luminosity inverso de color usa a luminosidade da camada superior com o matiz e a saturação da camada inferior entendendo as famílias de modos de mesclagem os 16 modos se dividem em quatro famílias modos de escurecimento multiply darken color burn o resultado nunca é mais brilhante do que qualquer uma das fontes úteis para sombras aprofundamento de sombras e adição de tintas escuras modos de clareamento screen lighten color dodge o resultado nunca é mais escuro do que qualquer uma das fontes úteis para brilhos vazamentos de luz e efeitos de clareamento modos de contraste overlay hard light soft light escurecem áreas escuras enquanto clareiam áreas claras aumentando o contraste geral o soft light é o mais sutil o hard light é o mais agressivo modos de diferença exclusão difference exclusion produzem resultados invertidos ou psicodélicos usados principalmente para efeitos criativos ou animações menos comuns em ui modos de componente hue saturation color luminosity dividem uma cor em seus componentes hsl e trocam canais individuais entre camadas são os mais indicados para recolorir fotos exemplos normal sem mesclagem a imagem frontal é desenhada sobre a imagem de fundo sem interação entre elas doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode normal background size 280 px background position center style head body div div body html copiar experimente você mesmo screen áreas claras permanecem brilhantes áreas escuras na imagem superior ficam transparentes revelando a camada abaixo bom para adicionar brilhos ou vazamentos de luz suaves doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode screen background size 280 px background position center style head body div div body html copiar experimente você mesmo color dodge clareia a camada inferior para refletir a camada superior produz resultados vívidos e de alto contraste útil para efeitos de néon ou reflexos doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode color dodge background size 280 px background position center style head body div div body html copiar experimente você mesmo multiply multiplica os valores dos canais de cor sempre produzindo um resultado mais escuro do que qualquer uma das fontes áreas brancas ficam transparentes áreas pretas permanecem pretas a escolha clássica para adicionar tintas ou sombras a uma foto doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode multiply background size 280 px background position center style head body div div body html copiar experimente você mesmo overlay aumenta o contraste aplicando multiply onde a camada inferior é escura e screen onde é clara mantém o caráter tonal da camada inferior enquanto o destaca doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode overlay background size 280 px background position center style head body div div body html copiar experimente você mesmo darken compara cada canal de cor e mantém o valor mais escuro as duas camadas competem pixel a pixel e as partes mais escuras de qualquer camada sempre prevalecem doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode darken background size 280 px background position center style head body div div body html copiar experimente você mesmo saturation usa a saturação da camada superior enquanto preserva o matiz e a luminosidade da camada inferior útil para dessaturar ou ressaturar partes de uma foto mantendo a paleta de cores doctype html html head style div width 400 px height 400 px background repeat no repeat repeat background image url https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png url uploads media default 0001 02 9ced3f2aae55e225cc0737bdb533a274bd004420 png background blend mode saturation background size 280 px background position center style head body div div body html copiar experimente você mesmo casos de uso comuns tingir uma foto com uma cor de marca coloque uma background color sólida sobre uma foto e use multiply para direcionar a imagem em direção a esse matiz áreas escuras na foto absorvem a tinta com mais intensidade hero background image url photo jpg background color 4f46e5 indigo brand color background blend mode multiply copiar criando um efeito duotone defina dois fundos com gradiente um para destaques outro para sombras sobre uma imagem em escala de cinza usando screen e multiply duotone background image linear gradient ff6b6b ff6b6b highlight color linear gradient 4f46e5 4f46e5 shadow color url photo jpg background blend mode screen multiply normal copiar a foto em escala de cinza recebe uma camada de destaque quente screen e uma camada de sombra fria multiply produzindo o clássico visual de duas tonalidades popular em seções hero sobreposição de textura funda uma textura de ruído ou papel em uma cor de fundo sólida sem editar o arquivo textured card background image url noise png background color f5f0eb background blend mode soft light copiar soft light geralmente é a escolha mais suave adiciona textura sem desbotar a cor base recolorir interativamente ao passar o mouse altere o modo de mesclagem dinamicamente para criar um efeito de hover somente com css card background image url photo jpg background color 10b981 background blend mode normal transition background blend mode 0 s instant switch card hover background blend mode multiply copiar observação background blend mode não é animável sem estados intermediários portanto as transições ocorrem de forma abrupta sem interpolação quando é necessário mesclar o elemento inteiro background blend mode mescla apenas as camadas dentro do próprio fundo do elemento se você precisar mesclar um elemento com o conteúdo atrás dele na página por exemplo uma sobreposição de vidro fosco use mix blend mode para ajustes de imagem única brilho contraste escala de cinza em que você não precisa de uma segunda camada a propriedade filter costuma ser uma solução mais simples e opacity é a ferramenta certa para desvanecer o elemento inteiro suporte dos navegadores background blend mode é suportado em todos os navegadores modernos chrome firefox edge safari e opera o internet explorer nunca ofereceu suporte forneça um background simples e sensato como fallback para ambientes legados fundos sem mesclagem renderizam as camadas empilhadas normalmente sem nenhum erro visível fallback first then enhanced hero background url photo jpg center cover 4f46e5 supports background blend mode multiply hero background blend mode multiply copiar prática prática o que a propriedade css background blend mode faz o que a propriedade css background blend mode faz define o modo de mistura da imagem de fundo e da cor de fundo ajusta o tamanho da imagem de fundo controla a rolagem da imagem de fundo permite que múltiplas imagens de fundo se misturem entre si determina a posição da imagem de fundo verificar was this page helpful yes no previous background attachment next background clip on this page referência da propriedade sintaxe como funciona a mesclagem em camadas valores entendendo as famílias de modos de mesclagem exemplos casos de uso comuns suporte dos navegadores prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript...