Meta tags:
description=A propriedade CSS filter aplica efeitos a imagens. Saiba sobre os valores e veja os efeitos ilustrados nos exemplos.;

Headings (most frequently used words):

propriedade, filter, exemplo, da, com, valor, css, quando, usar, sintaxe, exemplos, pontos, importantes, valores, prática, blur, resultado, de, uso, para, tornar, imagem, mais, brilhante, grayscale, saturate, sepia, contrast, opacity, invert, hue, rotate, drop, shadow, combinando, múltiplos, filtros,

Text of the page (most frequently used words):
#filter (71), html (40), propriedade (38), valor (38), css (37), style (37), border (34), title (33), imagem (31), image (31), com (26), width (25), img (24), 100 (23), background (23), body (22), head (22), text (22), experimente (21), exemplo (21), the (21), font (20), efeito (18), color (18), grid (18), aprender (15), que (14), for (14), max (14), para (13), this (13), grayscale (13), copiar (13), column (13), uma (12), shadow (12), media (12), default (12), opacity (11), você (11), alt (11), uploads (11), 0001 (11), 4982c4f43023330a662b9baed5a407e391ae6161 (11), jpeg (11), src (11), example (11), document (11), doctype (11), rotate (10), blur (10), set (10), break (10), hue (9), aplica (9), offset (9), mesmo (9), top (9), right (9), left (9), bottom (9), animation (9), valores (8), flex (8), padrão (8), filtro (8), sepia (8), saturate (8), drop (8), mais (8), brightness (8), position (8), stroke (8), elemento (7), invert (7), contrast (7), overflow (7), decoration (7), page (6), desfoque (6), cinza (6), são (6), filtros (6), transition (6), align (6), padding (6), margin (6), type (6), variant (6), w3docs (5), todos (5), sintaxe (5), fill (5), cor (5), efeitos (5), url (5), none (5), como (5), hover (5), first (5), box (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), editor (4), prática (4), exemplos (4), sombra (4), escala (4), pode (4), completamente (4), original (4), torna (4), não (4), por (4), mode (4), transform (4), size (4), height (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), json (3), code (3), encoder (3), quizzes (3), exercícios (3), php (3), javascript (3), quando (3), opacidade (3), sépia (3), contraste (3), podem (3), initial (3), função (3), arquivo (3), svg (3), deixa (3), acima (3), transparência (3), especificado (3), brilhante (3), resultado (3), aceita (3), vez (3), 300 (3), property (3), object (3), imagens (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), content (3), columns (3), auto (3), direction (3), clip (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), sobre (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), pontos (2), importantes (2), usar (2), projetada (2), saturação (2), quais (2), diferentes (2), tipos (2), ser (2), obtidos (2), usando (2), inherit (2), define (2), seu (2), converte (2), transparente (2), graus (2), ficará (2), preta (2), mostra (2), aplicado (2), nenhum (2), este (2), apenas (2), pixels (2), atrás (2), combinando (2), grandes (2), elementos (2), qualquer (2), isso (2), layout (2), animável (2), converter (2), then (2), funções (2), única (2), declaração (2), 8px (2), gray (2), mas (2), segue (2), forma (2), retângulo (2), delimitador (2), png (2), 150 (2), uso (2), css3 (2), fonte (2), plano (2), fundo (2), texto (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), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, inversão, distorção, brilho, mudança, herda, pai, recebe, caminho, especifica, incluir, âncora, específico, dessaturada, deixam, super, saturada, nível, descreve, fica, estado, atual, inverte, amostras, invertida, rotação, matiz, máximo, 360, negativos, permitidos, ajusta, aplicam, tornam, comprimento, quanto, maior, será, utiliza, desta, descrição, vidro, fosco, precisa, separada, afeta, próprio, backdrop, filtrar, está, translúcido, parte, pipeline, enquanto, isolada, simples, tem, suporte, ligeiramente, amplo, prefira, menos, esteja, outros, versus, raios, prejudicar, desempenho, rolagem, especialmente, dispositivos, móveis, elevados, custosos, diferente, bloco, contentor, descendentes, afetar, filhos, posicionamento, absoluto, fixed, cria, contexto, empilhamento, ease, combiná, comum, foto, total, transição, turned, brightened, blurred, 120, aplicar, várias, listando, separadas, espaço, elas, aplicadas, modo, alimenta, próxima, reordená, las, alterar, ordem, estão, escritas, múltiplos, 10px, mesmos, argumentos, raio, opcional, escolha, certa, ícones, svgs, 90deg, deg, aqui, seguir, tornar, 3px, 360deg, dom, versão, sim, herdado, inicial, estas, executados, gpu, afetam, apresentação, eles, animam, suavemente, nunca, alteram, ideais, estados, transições, contrário, ele, envolve, interna, adicionar, removendo, revelar, completa, chamar, atenção, conteúdo, primeiro, permaneça, legível, suavizar, editar, escurecer, tingir, destaque, use, quiser, visual, navegador, calcula, partir, dos, existentes, capítulo, abrange, cada, combinar, vários, casos, práticos, superam, alternativas, gráficos, alteração, durante, renderização, sem, modificar, comumente, usada, funciona, incluindo, planos, saiba, veja, ilustrados, nos, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, distance, fit, mix, lines, clamp, keyframes, isolation, 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, attachment, 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, cores, tabelas, links, class, introdução, basic, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, picker, general, cursos,

Text of the page (random words):
assword generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing 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 filter a propriedade css filter aplica efeitos a imagens saiba sobre os valores e veja os efeitos ilustrados nos exemplos a propriedade css filter aplica efeitos gráficos como desfoque alteração de cor ou sombra a um elemento durante a renderização sem modificar a fonte original é mais comumente usada em imagens mas funciona em qualquer elemento incluindo texto planos de fundo e svg este capítulo abrange cada função de filtro que a propriedade aceita como combinar vários filtros em uma única declaração e os casos práticos em que os filtros superam as alternativas quando usar a propriedade filter use filter quando quiser um efeito visual que o navegador calcula a partir dos pixels existentes do elemento escurecer ou tingir uma imagem de destaque atrás de texto brightness grayscale sepia em vez de editar o arquivo em um editor de imagens suavizar um plano de fundo blur para que o conteúdo em primeiro plano permaneça legível chamar atenção no hover removendo um filtro de escala de cinza para revelar a cor completa adicionar uma sombra que segue a transparência com drop shadow ao contrário de box shadow ele envolve a forma interna de um png svg em vez do retângulo delimitador como os filtros são executados na gpu e afetam apenas a apresentação eles animam suavemente e nunca alteram o arquivo fonte o que os torna ideais para transições e estados de hover a propriedade filter aceita estas funções none blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia url valor inicial none aplica se a todos os elementos herdado não animável sim versão css3 sintaxe dom object style filter hue rotate 360deg sintaxe sintaxe da propriedade css filter filter none blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia url initial inherit copiar exemplos exemplo da propriedade filter com o valor blur exemplo da propriedade css filter com o valor blur doctype html html head title title of the document title style img filter blur 3 px max width 100 style head body h2 filter property example h2 p for this image the filter is set to blur 3px p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo resultado exemplo de uso da propriedade filter para tornar a imagem mais brilhante exemplo da propriedade css filter com o valor brightness doctype html html head title title of the document title style img filter brightness 150 max width 100 style head body h2 filter property example h2 p for this image the filter is set to brightness 150 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo no exemplo a seguir o valor grayscale torna a imagem cinza exemplo da propriedade filter com o valor grayscale exemplo da propriedade css filter com o valor grayscale doctype html html head title title of the document title style img filter grayscale 80 max width 100 style head body h2 filter example h2 p for this image the filter is set to grayscale 80 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo aqui o filtro saturate é aplicado à imagem com o valor de 300 exemplo da propriedade filter com o valor saturate exemplo da propriedade css filter com o valor saturate doctype html html head title title of the document title style img filter saturate 300 max width 100 style head body h2 filter example h2 p for this image the filter is set to saturate 300 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor sepia exemplo da propriedade filter com o valor sepia doctype html html head title title of the document title style img filter sepia 70 max width 100 style head body h2 filter example h2 p for this image the filter is set to sepia 70 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor contrast exemplo da propriedade css filter com o valor contrast doctype html html head title title of the document title style img filter contrast 40 max width 100 style head body h2 filter example h2 p for this image the filter is set to contrast 40 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor opacity exemplo da propriedade css filter com o valor opacity doctype html html head title title of the document title style img filter opacity 0 4 max width 100 style head body h2 filter example h2 p for this image the filter is set to opacity 0 4 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor invert exemplo da propriedade css filter com o valor invert doctype html html head title title of the document title style img filter invert 0 7 max width 100 style head body h2 filter example h2 p for this image the filter is set to invert 0 7 p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor hue rotate exemplo da propriedade css filter com o valor hue rotate doctype html html head title title of the document title style img filter hue rotate 90 deg max width 100 style head body h2 filter example h2 p for this image the filter is set to hue rotate 90deg p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar experimente você mesmo exemplo da propriedade filter com o valor drop shadow drop shadow aceita os mesmos argumentos que a propriedade box shadow offset x offset y um raio de desfoque opcional e uma cor mas segue a forma não transparente da imagem em vez do seu retângulo delimitador por isso é a escolha certa para ícones png e svgs com transparência doctype html html head title title of the document title style img filter drop shadow 8 px 8 px 10 px gray max width 100 style head body h2 filter example h2 p for this image the filter is set to drop shadow 8px 8px 10px gray p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar combinando múltiplos filtros você pode aplicar várias funções de filtro em uma única declaração listando as separadas por espaço elas são aplicadas na ordem em que estão escritas de modo que o resultado de uma alimenta a próxima reordená las pode alterar o resultado doctype html html head title title of the document title style img filter grayscale 100 brightness 120 blur 2 px max width 100 style head body h2 filter example h2 p this image is first turned to grayscale then brightened then blurred p p img src uploads media default 0001 01 4982c4f43023330a662b9baed5a407e391ae6161 jpeg alt background image p body html copiar como filter é animável combiná lo com uma transição é um padrão comum por exemplo converter uma foto em escala de cinza para cor total no hover img filter grayscale 100 transition filter 0 3 s ease img hover filter grayscale 0 copiar pontos importantes um filtro cria um contexto de empilhamento e com qualquer valor diferente de none um bloco contentor para os descendentes isso pode afetar o layout de filhos com posicionamento absoluto e fixed valores elevados de blur são custosos raios de desfoque grandes em elementos grandes podem prejudicar o desempenho de rolagem especialmente em dispositivos móveis opacity versus a propriedade opacity a função de filtro aplica opacidade como parte do pipeline de filtros enquanto a propriedade opacity isolada é mais simples e tem suporte ligeiramente mais amplo prefira a propriedade a menos que esteja combinando a com outros filtros para filtrar o que está atrás de um elemento translúcido efeito de vidro fosco você precisa de backdrop filter uma propriedade separada filter afeta apenas os pixels do próprio elemento valores valor descrição experimente none não aplica nenhum efeito este é o valor padrão desta propriedade experimente blur aplica desfoque em uma imagem é especificado por um valor de comprimento quanto maior o valor mais desfoque será aplicado se nenhum valor for especificado utiliza se 0 experimente brightness torna a imagem mais brilhante se o valor for 0 a imagem ficará preta 100 é o valor padrão e mostra a imagem original valores acima de 100 tornam a imagem mais brilhante experimente contrast ajusta o contraste de uma imagem se o valor for 0 a imagem ficará preta 100 é o valor padrão e mostra a imagem original valores acima de 100 aplicam mais contraste à imagem experimente drop shadow aplica um efeito de sombra projetada na imagem experimente grayscale converte a imagem para escala de cinza 0 é o valor da imagem original 100 torna a imagem cinza valores negativos não são permitidos experimente hue rotate aplica um efeito de rotação de matiz na imagem é especificado em graus o valor máximo é 360 graus experimente invert inverte as amostras da imagem 0 é o valor padrão 100 deixa a imagem completamente invertida experimente opacity define o nível de opacidade da imagem descreve a transparência da imagem se o valor for 0 a imagem fica completamente transparente 100 é o estado atual da imagem experimente saturate aplica efeito de saturação na imagem 0 deixa a imagem completamente dessaturada 100 é o valor padrão da imagem valores acima de 100 deixam a imagem super saturada experimente sepia converte a imagem para sépia o valor padrão é 0 100 deixa a imagem completamente sépia experimente url a função url recebe o caminho de um arquivo svg que especifica um filtro e pode incluir uma âncora para um elemento de filtro específico...