Gerador de Filtros CSS
Preview em Tempo Real
CSS Gerado
Drop Shadow
Ativar filter: drop-shadow()
Backdrop Filter (Glassmorphism)
Glassmorphism
Ajuste o blur abaixo
Blur px
10px
backdrop-filter: blur(10px);
Sobre Filtros CSS
A propriedade filter do CSS permite aplicar efeitos visuais diretamente em elementos HTML, sem necessidade de editar as imagens originais.
- blur: Aplica desfoque gaussiano ao elemento.
- brightness: Clareia (>100%) ou escurece (<100%) o elemento.
- contrast: Aumenta ou reduz o contraste da imagem.
- grayscale: Converte para escala de cinza total ou parcial.
- hue-rotate: Rotaciona a roda de cores em graus.
- invert: Inverte as cores, útil para efeitos negativos.
- opacity: Controla a transparência do elemento.
- saturate: Aumenta ou reduz a saturação das cores.
- sepia: Aplica tom sépia, remetendo a fotos antigas.
- drop-shadow: Sombra que respeita a forma real do elemento (diferente de box-shadow).
- backdrop-filter: Aplica filtro ao fundo atrás do elemento, criando o efeito glassmorphism.
Filtros
Presets