Look Instagram Vintage
- Entrada
- Foto colorida
- Saída esperada
- filter: sepia(0.3) contrast(1.1) brightness(1.05) saturate(0.9);
Aquecimento sutil com leve aumento de contraste. Clássico editorial.
CSS filter efeitos imagem online
Efeitos CSS em imagens com filter: grayscale, sepia, blur, vivid e mais
A propriedade `filter` do CSS transforma imagens e elementos sem modificar o arquivo original — tudo acontece no compositor gráfico do navegador. As mesmas funções usadas em editores de imagem (brilho, contraste, saturação, sépia, escala de cinza) estão disponíveis em CSS puro com uma linha de código.
Como as funções filter interagem entre si
- Os filtros são aplicados em ordem da esquerda para a direita, em cascata. A ordem importa: `brightness(1.3) contrast(1.2)` produz resultado diferente de `contrast(1.2) brightness(1.3)`. Quando brightness aumenta antes do contrast, o contraste opera sobre a imagem já mais clara. Para efeitos visuais ricos, experimente diferentes ordens.
- `hue-rotate()` é a função mais poderosa para mudar o "clima" de uma imagem preservando luminosidade e saturação. Uma rotação de 30–60 graus aquece ou esfria a imagem dependendo da paleta original. 180 graus cria a aparência complementar completa.
Presets de efeito prontos para copiar
Modo noite (dark UI)
- Entrada
- Imagem de interface clara
- Saída esperada
- filter: invert(1) hue-rotate(180deg) brightness(0.85);
Inverte a imagem para contextos dark-mode preservando cores perceptuais via hue-rotate.
FAQ da ferramenta completa
É uma propriedade que aplica efeitos gráficos como blur, ajuste de cor, saturação e sombra sobre um elemento inteiro. Funciona em imagens, texto, ícones e qualquer elemento HTML.
Perguntas frequentes
CSS filter funciona em elementos que não são imagens?
Sim. Filter se aplica ao elemento inteiro e seus descendentes. Pode filtrar texto, SVG, vídeo, iframes e qualquer elemento HTML. Blur em um container, por exemplo, aplica o desfoque em todo o conteúdo interno.
Qual é a diferença entre filter: opacity e a propriedade opacity?
Funcionalmente iguais para valores simples. A diferença é que `filter: opacity()` força a criação de um contexto de compositing mesmo quando o valor é 1 (100%), o que pode ter implicações de performance. Prefira `opacity` direto para controle de transparência.
