Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de glassmorphism CSS

CSS Glassmorphism Generator

Construa painéis de vidro fosco com tom, opacidade, desfoque, saturação e borda ajustáveis, pré-visualizados sobre um fundo ocupado.

Caminho da tarefa / da entrada ao resultado

Escolha a tonalidade do vidro

Roda localmente · Nada é enviado

Como Gerador de glassmorphism CSS funciona, privacidade e ferramentas relacionadas

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.

  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.

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.
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.

Continuar em Design

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

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

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar