Gerador CSS Glassmorphism
Gere um bloco CSS "frosted glass" — fundo rgba() translúcido, backdrop-filter blur (com prefixo -webkit-), borda branca suave e sombra sutil — a partir de cor, opacidade, blur e raio.
Entrada
Combinado com a cor de fundo em um valor rgba().
Usado para backdrop-filter e seu gêmeo com prefixo -webkit-.
Opacidade da borda branca de 1px do painel.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-glassmorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"backgroundColor": "#ffffff",
"backgroundOpacity": "20",
"blurAmount": "10",
"borderRadius": "16",
"borderOpacity": "30"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-glassmorphism-generator` tool (CSS Glassmorphism Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-glassmorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador CSS Glassmorphism — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador CSS Glassmorphism transforma um seletor de cores e quatro controles deslizantes em um bloco CSS "frosted glass" pronto para copiar e colar. Glassmorphism é uma tendência de design de UI popular — popularizada pela primeira vez pelos painéis frost do macOS e depois pelo Fluent Design do Windows e pelos painéis e cards de dashboard incontáveis — onde um painel translúcido fica sobre um fundo colorido ou ocupado, desfocado o suficiente para dar uma pista do que está atrás enquanto permanece legível. O look vem do empilhamento de um punhado de propriedades CSS: um fundo rgba() semi-transparente, um desfoque backdrop-filter, uma borda leve suave, um raio de canto arredondado e uma sombra de queda sutil para elevar.
Propriedades geradas
background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);- background — sua cor escolhida combinada com o controle deslizante Opacidade de Fundo em um valor
rgba(). Opacidade mais baixa permite que mais do que estiver atrás do painel apareça. - backdrop-filter / -webkit-backdrop-filter — o desfoque real que torna o efeito lido como "vidro". Ambas as linhas são sempre emitidas juntas; veja a nota de suporte do navegador abaixo.
- border — uma borda branca sólida de 1px, matizada pelo controle deslizante Opacidade da Borda. Uma borda leve e fraca é o que vende o look "pane of glass catching light"; uma borda sólida se lê como um card plano em vez disso.
- border-radius — cantos arredondados do controle deslizante Border Radius. Painéis de vidro quase sempre são arredondados em vez de ter cantos agudos.
- box-shadow — uma sombra fixa e sutil que levanta o painel da página sem competir com o desfoque.
Nota de suporte do navegador
backdrop-filter é bem suportado no Chrome, Edge e Firefox modernos, mas o Safari historicamente exigia o prefixo -webkit-backdrop-filter para renderizar o desfoque — é por isso que o CSS gerado sempre inclui ambas as declarações. Se você remover a linha -webkit-, os usuários do Safari podem ver um painel translúcido plano sem desfoque em vez do efeito frosted-glass. Também observe: backdrop-filter desfoca o que quer que esteja atrás do elemento, então o efeito é invisível a menos que o elemento seja colocado em camadas sobre algo com textura ou cor — um fundo de página branco simples não o mostrará.
Como usar
- Escolha uma Cor de Fundo e defina Opacidade de Fundo — juntas, essas se tornam o preenchimento rgba() translúcido do painel.
- Arraste Blur (px) para controlar o quão frosted o vidro parece; valores mais altos desfocam o fundo atrás do painel muito mais fortemente.
- Defina Border Radius para quão arredondados são os cantos do painel.
- Ajuste Opacidade da Borda para tornar a borda branca fraca do painel mais ou menos visível.
- Copie o bloco CSS gerado e aplique-o a qualquer elemento posicionado que fique sobre uma imagem, gradiente ou outros elementos.
FAQ
Por que a borda é sempre branca?
Uma borda semi-transparente leve é a convenção quase universal para glassmorphism — ela imita a forma como vidro real captura luz em suas bordas, independentemente da tonalidade do painel. Se você precisar de uma borda com cores diferentes, troque rgba(255, 255, 255, …) na saída pela sua própria cor.
Por que o desfoque não aparece no meu elemento?
backdrop-filter apenas desfoca conteúdo já renderizado atrás do elemento — ele precisa de algo com detalhe (uma imagem, gradiente ou outra UI) abaixo e o próprio elemento precisa de um fundo transparente ou translúcido para que esse conteúdo apareça. Um fundo totalmente opaco derrota o efeito completamente.
Posso usar uma cor de fundo escura para um look "dark glass"?
Sim — escolha uma cor hex escura (por exemplo #000000) e uma opacidade baixa a moderada; a borda permanece branca para contraste contra o fundo desfocado escuro, que é o tratamento glassmorphism dark-mode padrão.
Esta ferramenta armazena ou carrega algo? Não. Todos os cálculos são executados localmente no seu navegador — sua cor e valores de controle deslizante nunca saem do seu dispositivo.