Pular para o conteúdo
Toolars
Explorar

Gerador de glassmorphism CSS

CSS Glassmorphism Generator

Ajuste tom do vidro, desfoque, saturação, opacidade, raio e opacidade da borda. Altere fundo e texto da prévia; a largura da borda e a sombra exportadas são fixas.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como montar um painel glassmorphism

  1. 01

    Escolha a tonalidade do vidro

    Escolha uma Cor de tonalidade do vidro. A pré-visualização flutua o painel sobre dois orbes coloridos, então o material é julgado contra um fundo movimentado, do jeito que será em uma tela real. Opacidade · Fundo · Cartão / Botão / Círculo

  2. 02

    Defina opacidade e desfoque

    A Opacidade da superfície vai de 0.05 a 0.8 — quanto menor, mais transparente — e o Desfoque de fundo de 0 a 40 px suaviza o que estiver atrás do painel.

  3. 03

    Ajuste saturação, borda e raio

    A Saturação (50–200%) enriquece ou suaviza o fundo, a Opacidade da borda (0–0.8) contorna a borda na cor de tonalidade, e o Raio do canto (0–48 px) arredonda o painel.

  4. 04

    Equilibre o material

    Os controles de superfície compensam uns aos outros: opacidade baixa precisa de mais desfoque para parecer vidro, e Saturação acima de 100% evita que um fundo movimentado desbote atrás de uma tonalidade clara. O material padrão — tonalidade branca com opacidade 0.22, desfoque de 18 px, saturação de 140% — é um meio-termo comprovado.

  5. 05

    Copie o CSS do painel

    Pressione Copiar CSS ou Baixar .css para salvar toolars-glass-panel.css. A regra .glass-panel combina um fundo rgba, backdrop-filter com seu gêmeo -webkit-, uma borda de 1 px na tonalidade e uma sombra suave.

  6. 06

    Planeje o fallback

    Sem backdrop-filter, o fundo rgba, a borda e a sombra continuam visíveis. Zerar o Desfoque de fundo é só uma aproximação do fallback, pois o filtro de saturação pode continuar ativo. Teste o CSS nos navegadores de destino e aumente a Opacidade da superfície se o texto precisar de mais contraste. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de glassmorphism CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de glassmorphism CSS realmente faz

A barra de controles flutuante de um player de música, um cartão de notificação pairando sobre um mapa, um painel de login suspenso acima de um mural de fotos — o vidro fosco vende profundidade sem esconder a página. O efeito depende inteiramente do que está atrás dele, e é por isso que esta pré-visualização renderiza formas coloridas para o desfoque trabalhar, e toda a exploração acontece localmente, então a paleta de uma interface ainda não lançada nunca sai do dispositivo. Quando o material se equilibra, a regra exportada carrega cada decisão com ela.

Perguntas frequentes

Que CSS a exportação produz?
Uma regra .glass-panel: um fundo rgba a partir da sua tonalidade e opacidade, backdrop-filter: blur() saturate() nas formas padrão e -webkit-, uma borda de 1 px na tonalidade com a sua opacidade de borda, o seu raio de canto e uma sombra suave fixa. Ajuste tom do vidro, desfoque, saturação, opacidade, raio e opacidade da borda. Altere fundo e texto da prévia; a largura da borda e a sombra exportadas são fixas. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
Glassmorphism funciona em todo navegador?
O suporte e a renderização de backdrop-filter variam conforme navegador e versão. O CSS exportado inclui declarações padrão e -webkit-, mas não detecta suporte em tempo de execução. Sem o filtro, o fundo translúcido, a borda e a sombra permanecem; confira o contraste do texto sobre o fundo real.
Por que a pré-visualização precisa daqueles orbes coloridos?
backdrop-filter processa o que está atrás do elemento, então vidro sobre um fundo vazio não mostra nada. Os orbes dão ao desfoque e à saturação algo real para trabalhar — a mesma razão pela qual efeitos de vidro precisam de fundos movimentados em produção.
O que é fixo na regra exportada?
Três coisas: a largura da borda é sempre 1 px, a cor da borda é sempre a sua tonalidade na Opacidade da borda escolhida, e a sombra é um espalhamento suave fixo. Todo o resto — fundo, desfoque, saturação, raio — acompanha seus controles diretamente.
Quão opaco o vidro deve ser?
Fique na metade inferior do intervalo para painéis flutuando sobre conteúdo — o padrão 0.22 mantém os fundos legíveis através do material. Suba apenas quando o painel carrega texto que precisa sobreviver a um fundo movimentado, e confira o contraste nos seus tamanhos de fonte reais.
Minhas configurações são enviadas?
Não. O painel é calculado e pré-visualizado inteiramente nesta aba sem conta, e nada é armazenado, registrado ou enviado. Pressione Redefinir para restaurar o material padrão.

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar