# 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. > Página canônica: https://elysiatools.com/pt/tools/glassmorphism-css-snippet-builder - **Categoria:** Design - **Palavras-chave:** glassmorphism, neumorfismo, backdrop-filter, vidro fosco, gerador css, cartão de vidro ## Visão geral 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. ## Entradas - **Estilo** (select) - **Desfoque do fundo (px)** (number) - **Saturação do fundo (%)** (number) - **Cor da tonalidade do vidro** (color) - **Opacidade da tonalidade** (number) - **Raio da borda (px)** (number) - **Largura da borda (px, só vidro)** (number) - **Opacidade da borda (só vidro)** (number) - **Opacidade da sombra externa (só vidro)** (number) - **Brilho da borda superior (inset)** (checkbox) - **Sobreposição de grão** (checkbox) - **Fallback @supports** (checkbox) - **Cor de fundo neu** (color) - **Distância da sombra neu (px)** (number) - **Estado pressionado (inset)** (checkbox) - **Modo escuro neu** (checkbox) ## Quando usar - Quando precisar de um cartão ou painel com efeito de vidro fosco e backdrop-filter em interfaces modernas. - Ao criar superfícies neumórficas (Soft UI) que combinam com o fundo da página, inclusive estado pressionado e modo escuro. - Para obter CSS pronto para copiar, com prefixos de compatibilidade e classes Tailwind sem escrever o código à mão. ## Como funciona - Escolha o estilo glassmorphism ou neumorfismo e ajuste desfoque, saturação, cor e opacidade da tonalidade, raio e demais parâmetros visuais. - Ative ou desative brilho superior, sobreposição de grão, fallback @supports, estado pressionado ou modo escuro conforme o estilo selecionado. - Veja a pré-visualização ao vivo do cartão sobre o fundo em gradiente e copie o snippet CSS gerado, que já inclui -webkit-backdrop-filter e o mapeamento Tailwind. ## Casos de uso - Cartões e widgets de dashboard com vidro fosco sobre fundos em gradiente. - Painéis e superfícies neumórficas em temas claros ou escuros, com ou sem estado pressionado. - Prototipagem de UI em projetos Tailwind com classes geradas automaticamente. ## Perguntas frequentes ### 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. ## Ferramentas relacionadas - [Extrator de contorno melódico de áudio](https://elysiatools.com/pt/tools/audio-melody-contour-extractor): Extrai a melodia dominante e reúne MIDI, eventos de notas, contorno de altura, SVG e JSON em um ZIP. - [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis. - [Ferramenta de Marca d'Água de Canto](https://elysiatools.com/pt/tools/image-watermark-corner): Adicione marcas d'água de canto às imagens com posicionamento, tamanho, opacidade e opções de cantos múltiplos personalizáveis - [Ferramenta de Marca d'Água Diagonal](https://elysiatools.com/pt/tools/image-watermark-diagonal): Adicione marcas d'água diagonais a imagens com ângulo, tamanho, opacidade e posicionamento ao longo da diagonal personalizáveis - [Ferramenta de Marca d'Água com Imagem](https://elysiatools.com/pt/tools/image-watermark-image): Adicione marcas d'água de imagem a imagens com posição, tamanho, opacidade e rotação personalizáveis - [Ferramenta de Opacidade de Marca d'Água](https://elysiatools.com/pt/tools/image-watermark-opacity): Adicione marcas d'água com opacidade personalizada às imagens, suportando marcas d'água de texto e imagem com controles avançados de opacidade - [Ferramenta de Mosaico de Marca d'Água](https://elysiatools.com/pt/tools/image-watermark-tile): Adicione marcas d'água em mosaico a imagens com tamanho, opacidade, espaçamento e padrões personalizáveis - [Extrator de dados de graficos SVG](https://elysiatools.com/pt/tools/svg-chart-to-data-extractor): Extrai pontos de dados de estruturas SVG de linhas, barras e pizza e exporta JSON ou CSV ## Exemplos - [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG - [Tailwind CSS Samples](https://elysiatools.com/pt/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS ## Conteúdo relacionado - [Ferramentas de Workflow para SVG, Favicon e Icones](https://elysiatools.com/pt/hubs/svg-favicon-icon-workflows): Gere pacotes de favicon, otimize SVGs, converta icones entre ICO, PNG, JPG, WebP e SVG e prepare assets prontos para web em um unico hub. - [Ferramentas de codificacao e conversao de audio](https://elysiatools.com/pt/hubs/audio-convert): Compare conversao de formatos de audio, ajustes de bitrate, conversao de taxa de amostragem, troca de codec e exportacao em um unico hub. - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de intercambio JSON e traducao de formatos](https://elysiatools.com/pt/hubs/json-convert): Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub.