Sobre esta ferramenta
O Gerador de filtros CSS controla desfoque, brilho, contraste, escala de cinzentos, rotação do matiz, inversão, opacidade, saturação e sépia. A pré-visualização usa elementos visuais integrados na página, sem pedir imagens remotas.
Como utilizar
- Mova os controlos deslizantes ou introduza valores para ajustar os filtros.
- Observe as alterações de cores, contornos e opacidade em tempo real.
- Copie a declaração filter gerada.
- Clique em Repor para recuperar todos os valores iniciais e obter filter: none.
Exemplos de utilização
- grayscale(100%) produz um efeito totalmente em tons de cinzento.
- brightness(120%) aumenta o brilho; brightness(100%) mantém o valor original.
- blur(2px) suaviza os contornos e opacity(50%) torna o elemento semitransparente.
filter: blur(2px) brightness(120%) contrast(110%) saturate(130%);
filter: none;Funcionamento e explicação do CSS
CSS filter aplica efeitos visuais ao elemento renderizado pela ordem das funções declaradas. Os valores iniciais são blur 0px, brightness 100%, contrast 100%, grayscale 0%, hue-rotate 0deg, invert 0%, opacity 100%, saturate 100% e sepia 0%. As funções com valores iniciais podem ser omitidas; quando todas estão nesses valores, o resultado é none.
Utilizações comuns
- Comparar estilos de filtro em cartões, ilustrações e imagens.
- Preparar CSS para estados de passagem do ponteiro e efeitos de temas.
- Compreender o efeito da combinação de várias funções filter.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
O que é CSS filter?
É uma propriedade de efeitos visuais do navegador que aplica desfoque, brilho, alterações de cor e opacidade a um elemento.
O que significa brightness(100%)?
Mantém o brilho original. Valores abaixo de 100% escurecem o elemento e acima de 100% tornam-no mais claro.
Como se usam blur() e opacity()?
blur() usa um comprimento não negativo para controlar o desfoque. opacity() controla a opacidade entre 0 e 100%, sendo 100% totalmente opaco.
CSS filter altera a imagem original?
Não. Altera apenas a apresentação no navegador, sem escrever ou modificar o ficheiro de imagem original.
Porque aparece filter: none depois de repor?
Quando todos os parâmetros voltam aos valores neutros iniciais, none representa integralmente o resultado sem enumerar cada função.