Pockit

🚀 Pockit chegou ao Chrome!

Pare de pesquisar no Google. Acesse as ferramentas com um clique.

Usar no Chrome (Grátis)

Privacidade Totalmente Garantida

Seus arquivos são processados diretamente no navegador e nunca saem do seu dispositivo.

Gerador de Glassmorphism

Design de vidro moderno. Gere o efeito Glassmorphism CSS (vidro fosco) com desfoque e transparência personalizáveis. Tendência em segundos.

Presets

10px
25%
180%
18%

Código CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);

Pré-visualização

Glassmorphism

Uma tendência de design moderna que cria efeitos transparentes e desfocados como o vidro.

Dica: Safari requer -webkit-backdrop-filter, que está incluído no código gerado!

Gerador CSS Glassmorphism

Crie o efeito da moda 'Glassmorphism' (vidro fosco) para sua UI. Ajuste desfoque, transparência e saturação para gerar o CSS perfeito.

1Quando usar esta ferramenta?

💡Projetar sites da moda
💡Criar UIs de cartões ou modais elegantes
💡Precisar de painéis transparentes sobre imagens de fundo

2Funcionalidades

  • Editor visual em tempo real
  • Gera CSS backdrop-filter
  • Inclui prefixo de compatibilidade WebKit
  • Cor de fundo personalizável

3Como usar

  • Ajuste os controles deslizantes de desfoque e transparência.
  • Ajuste saturação e opacidade de borda.
  • Pré-visualize o efeito no cartão.
  • Copie o código CSS.

Perguntas Frequentes

Q. Isso funciona em todos os navegadores?

A. A maioria dos navegadores modernos suporta `backdrop-filter`. Incluímos `-webkit-backdrop-filter` para melhor compatibilidade com Safari.

Ferramentas Recomendadas

Experimentar agora

Pré-visualização HTML
Escreva e pré-visualize HTML, CSS e JavaScript em tempo real. Teste seu código instantaneamente em um sandbox seguro.
Try it
Gerador de Meta Tags
Melhore seu SEO. Gere meta tags e cartões sociais (Open Graph, Twitter) para destacar seu site nas buscas. Copie e cole.
Try it
CSS Flexbox
Domine o layout responsivo. Experimente com Flexbox visualmente e gere o código perfeito. Aprenda e construa interfaces mais rápido.
Try it