Gerador de filtros de fundo CSS
Gerador de filtros de fundo CSS online gratuito, sem necessidade de instalação. Crie efeitos de glassmorphism e blur.
Sobre CSS backdrop-filter
Crie CSS backdrop-filter ao vivo arrastando os controles deslizantes de nove funções de filtro: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. A saída emite tanto backdrop-filter quanto -webkit-backdrop-filter para que o efeito funcione em navegadores modernos, e um cartão de vidro é renderizado sobre um fundo personalizável para que você veja o resultado enquanto o ajusta.
Como usar
1. Opcionalmente clique em uma predefinição (Frosted Glass, Dark Glass, Vintage, Inverted) para começar de uma aparência curada. 2. Arraste os controles deslizantes no painel Controls; cada filtro só aparece no CSS gerado quando difere do seu padrão (ex. brightness/contrast/saturate/opacity padrão 100, blur padrão 0). 3. Edite o campo Background com qualquer valor CSS background válido (gradiente, url de imagem, cor) para testar o filtro sobre diferentes fundos. 4. Clique em Copy para copiar ambas as declarações backdrop-filter e -webkit-backdrop-filter.
Controles deslizantes de filtro e faixas
blur 0–50px; brightness 0–200% (padrão 100); contrast 0–200% (padrão 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (padrão 100); saturate 0–200% (padrão 100); sepia 0–100%. Reset restaura cada controle deslizante ao seu padrão. Filtros no valor neutro são omitidos da saída; se todos forem neutros a saída é backdrop-filter: none.
▶Por que a visualização parece diferente do meu site real?
▶O CSS copiado inclui o prefixo -webkit-?
▶Por que um filtro está ausente da minha saída?
▶Posso usar uma imagem de fundo em vez de um gradiente?
Se este ferramenta foi útil para você, pense em me dar um café.
Compre um café para mim.