Predefinições
Vidro
background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
O que faz
Cria CSS de vidro fosco (glassmorphism) — backdrop-blur, um fundo translúcido, uma borda subtil e uma sombra suave. Ajuste blur, opacidade, tinta, raio, borda e saturação, pré-visualize ao vivo e copie o bloco de declaração completo. 100% no cliente.
Como usar
- Ajuste os cursores: Blur, Opacity, Border, Radius, Saturation.
- Escolha uma cor de Tint.
- Copy o CSS.
Exemplos
Blur 12, opacidade 0.6, tinta branca, raio 16 →
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Bom saber
- Privado: a geração é local.
- O
backdrop-filterprecisa de um fundo colorido ou de imagem atrás do elemento para mostrar o efeito. - Ferramentas relacionadas: Box-Shadow Generator, CSS Gradient Generator.