Gerador de filtros de fundo CSS

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.

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.

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.