O snippet inclui o prefixo -webkit-backdrop-filter?

Sim. O código sempre emite -webkit-backdrop-filter, necessário no Safari até a versão 17.x.

Posso adicionar grão ao vidro fosco?

Sim. A sobreposição de grão usa SVG feTurbulence em data-URI no ::before, com opacidade baixa.

Como funciona o mapeamento para Tailwind?

Mapeia para classes como backdrop-blur-xl e rounded-2xl; usa valores arbitrários quando preciso e assinala a mudança de blur-sm entre v3 e v4.

O neumorfismo serve para botões interativos?

Não. As sombras não entram no cálculo de contraste; evite em controles clicáveis.

O que o fallback @supports faz?

Quando backdrop-filter não é suportado, recorre a uma tonalidade rgba quase opaca.

Elysia Tools

Navegação

Design

Gerador de snippets CSS glassmorphism / neumorfismo

Gera de ponta a ponta o snippet CSS completo de glassmorphism ou neumorfismo: ajuste desfoque, saturação, opacidade da tonalidade, raio, borda, sombra externa e brilho superior; opcionalmente sobreposição de grão SVG feTurbulence e fallback @supports; inclui automaticamente o prefixo -webkit-backdrop-filter (obrigatório antes do Safari 18) e o mapeamento para classes Tailwind (com a nota v3/v4), com pré-visualização ao vivo sobre fundo em gradiente.

Detalhes

O que esta ferramenta ajuda você a fazer

Constantes verificadas (ago 2026): clássicas do css.glass (rgba(255,255,255,.2), blur(5px), raio 16px, sombra 0 4px 30px); composição 2025 (blur(12px) saturate(160%), sombra 0 8px 32px rgba(0,0,0,.12) + inset superior). backdrop-filter: 95,69% (caniuse); Safari exige -webkit- até 17.x, sem prefixo do 18; Firefox desde 103. Grão: feTurbulence fractalNoise em data-URI no ::before (0,05–0,15); @supports recorre a rgba quase opaco. Tailwind: backdrop-blur-xl=24px, backdrop-saturate-150, rounded-2xl=16px; o v4 mudou blur-sm de 4px para 8px — valores exatos via backdrop-blur-[12px]. Neumorfismo (neumorphism.io): fundo igual ao da página, sombra escura abaixo-direita + clara acima-esquerda, inset = pressionado, modo escuro com clara a 0,03–0,1; as sombras não contam para o contraste — não usar em controles interativos.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

Cartão de vidro fosco de boa prática (blur 12 / saturate 160)

Composição 2025: blur(12px) saturate(160%), tonalidade branca 0,15, raio 16px, borda 0,25, sombra em camadas com brilho superior, grão e fallback @supports, mais o mapeamento Tailwind com o aviso do v4.

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

Controle neumórfico escuro no estado pressionado (inset)

Superfície neumórfica em modo escuro (#2d2d2d) com sombras inset para o estado pressionado e clara atenuada a 0,06 — a saída Tailwind usa valores arbitrários de sombra.

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

Entradas

As opções estão agrupadas para deixar formulários longos mais fáceis de revisar.

16 opções

ConfiguraçõesAjuste formatos, intervalos, números e modos.11

EstiloselectOpcionalDesfoque do fundo (px)numberOpcionalSaturação do fundo (%)numberOpcionalCor da tonalidade do vidrocolorOpcionalOpacidade da tonalidadenumberOpcionalRaio da borda (px)numberOpcionalLargura da borda (px, só vidro)numberOpcionalOpacidade da borda (só vidro)numberOpcionalOpacidade da sombra externa (só vidro)numberOpcionalCor de fundo neucolorOpcionalDistância da sombra neu (px)numberOpcional

AlternânciasAtive ou desative comportamentos opcionais.5

Brilho da borda superior (inset)checkboxOpcionalAtivo quando marcadoSobreposição de grãocheckboxOpcionalAtivo quando marcadoFallback @supportscheckboxOpcionalAtivo quando marcadoEstado pressionado (inset)checkboxOpcionalAtivo quando marcadoModo escuro neucheckboxOpcionalAtivo quando marcado

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Gerador de snippets CSS glassmorphism / neumorfismo

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Cartão de vidro fosco (composição 2025)

2. Superfície neumórfica escura pressionada

Perguntas frequentes

Exemplos SVG

Tailwind CSS Samples

Exemplos de Processamento de Imagem Web Python

Exemplos do Framework CSS Bulma

Extrator de contorno melódico de áudio

Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)

Ferramenta de Marca d'Água de Canto

Ferramenta de Marca d'Água Diagonal

Ferramentas de Workflow para SVG, Favicon e Icones

Ferramentas de codificacao e conversao de audio

Ferramentas de conversao de formatos de imagem e exportacao animada

Ferramentas de intercambio JSON e traducao de formatos

3. Vidro fosco simples sem grão