Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Filtro CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

Visualização ao Vivo

Arraste e solte uma imagem aqui, ou clique para selecionar

Predefinições

Nenhum

Vintage

Dramático

Legal

Quente

Tom Sépia

Alto Contraste

Noir

Sonhador

Desbotado

Código CSS

ANUNCIADO Remover?

Guia

Gerador de Filtro CSS

O Gerador de Filtros CSS permite que você crie visualmente efeitos de filtro CSS com uma pré-visualização de imagem ao vivo. Ajuste as propriedades individuais do filtro usando controles deslizantes intuitivos e veja os resultados instantaneamente — sem adivinhação necessária. Quando estiver satisfeito com o visual, copie o código CSS gerado e cole-o diretamente em sua folha de estilos.

Como usar

Comece com a imagem de exemplo padrão ou carregue a sua, arrastando e soltando uma imagem na área de pré-visualização ou clicando em “Carregar Imagem”. Em seguida, ajuste os controles deslizantes de filtro para obter o efeito desejado. Cada controle deslizante controla uma propriedade de filtro CSS diferente — desfoque, brilho, contraste, escala de cinza, matiz-rotação, inversão, opacidade, saturação e sépia. Você também pode ativar a sombra projetada com deslocamento, desfoque e cor configuráveis. Experimente um dos presets integrados como Vintage, Dramático ou Noir para pontos de partida rápidos. Quando estiver satisfeito, clique no botão Copiar para obter o código CSS.

Características

Pré-visualização de Imagem ao Vivo – Veja as alterações de filtro aplicadas à sua imagem em tempo real enquanto você move os controles deslizantes
10 Propriedades de Filtro – Controle total sobre desfoque, brilho, contraste, escala de cinza, matiz-rotação, inversão, opacidade, saturação, sépia e sombra projetada
Efeitos Predefinidos – Predefinições de um clique, incluindo Vintage, Dramático, Frio, Quente, Tom Sépia, Alto Contraste, Noir, Sonhador e Desbotado
Upload de Imagem – Carregue suas próprias imagens via arrastar e soltar ou seletor de arquivos para pré-visualizar filtros em conteúdo real
Prefixos de Fornecedor – O CSS gerado inclui -webkit-filter para compatibilidade máxima com navegadores
Controle de Sombra Projetada – Ajuste fino da sombra projetada com deslocamento X/Y, raio de desfoque e seletor de cores
Cópia com Um Clique – Copie o código de filtro CSS gerado instantaneamente para sua área de transferência
Botão de reset – Restaure rapidamente todos os controles deslizantes para seus valores padrão

ANUNCIADO Remover?

 Perguntas frequentes

O que é a propriedade de filtro CSS e como funciona?

A propriedade de filtro CSS aplica efeitos gráficos como desfoque ou mudança de cor à renderização de um elemento. Ela usa funções de filtro (blur(), brightness(), contrast(), etc.) que processam os pixels do elemento antes de exibi-los. Múltiplos filtros podem ser encadeados em uma única declaração, e eles são aplicados na ordem listada.
Os filtros CSS afetam o desempenho da página?

Os filtros CSS são acelerados por GPU em navegadores modernos, então filtros simples como brilho ou contraste têm impacto mínimo no desempenho. No entanto, filtros complexos como desfoque com grandes valores de raio ou filtros aplicados a muitos elementos simultaneamente podem causar quedas de quadros, especialmente em dispositivos móveis. Para melhor desempenho, aplique filtros ao menor número de elementos necessário e evite animar o desfoque em grandes áreas.
Qual é a diferença entre filter e backdrop-filter em CSS?

A propriedade filter aplica efeitos ao próprio elemento e seu conteúdo, enquanto backdrop-filter aplica efeitos à área atrás de um elemento. Por exemplo, backdrop-filter: blur(10px) cria um efeito de vidro fosco desfocando o que estiver visível através do fundo do elemento, sem afetar o conteúdo do próprio elemento.
Quais navegadores suportam filtros CSS?

Filtros CSS são suportados em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. O Safari ainda requer o prefixo -webkit- para algumas funções de filtro. O Internet Explorer não suporta filtros CSS. Para máxima compatibilidade, inclua as declarações -webkit-filter e filter padrão em seu CSS.