background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);O que é o gerador de morfismo CSS?
O CSS GlassMorphism Generator é um editor visual do estilo de interface de vidro fosco, onde uma superfície translúcida se desfoca o que está por trás dela. Você ajusta o desfoque de fundo, a transparência, a saturação, a cor do tom e o raio de canto com controle deslizantes, assiste a uma atualização de pré-visualização sobre um fundo colorido e copia o CSS exato que ele produz.
O GlassMorphism depende da propriedade do filtro de pano de fundo, que aplica um borrão ao conteúdo por trás de um elemento e não ao próprio elemento. Combinado com um fundo semitransparente, uma borda de linha do cabelo e uma sombra suave, ele produz o visual em camadas de vidro popularizado pelos sistemas operacionais modernos. Obter o equilíbrio à mão é complicado, então essa ferramenta gerencia todos os valores e gera um bloco limpo e copiável.
Tudo é executado no seu navegador Escolha uma predefinição como Frosted, Dark ou Vibrant, ajuste os controles deslizantes e copie o CSS - incluindo o - webkit-prefixed background-filter para um suporte mais amplo Nenhuma conta, sem uploads, e ele continua funcionando offline uma vez que a página tenha carregado.
O efeito depende de duas propriedades trabalhando juntas, e falha silenciosamente se alguma delas estiver faltando O filtro de backdrop desfoca tudo o que está por trás do elemento, por isso precisa de uma cor de fundo parcialmente transparente para mostrar: em plena opacidade não há nada para ver, e sem fundo algum a superfície desaparece Também precisa de algo por trás que valha a pena desfocar, e é por isso que o efeito parece um painel plano sobre um fundo liso e ganha vida sobre uma fotografia Dois custos práticos O desfoque de backdrop é uma das coisas mais caras para compor, particularmente sobre uma grande área ou durante a rolagem E o texto em uma superfície translúcida tem uma relação de contraste que muda com o que passa por baixo, para que possa passar por uma verificação de contraste contra um fundo e falhar contra outro.
Como usar o gerador de morfosm CSS?
Escolha uma predefinição
Comece com fosco, claro, escuro, vibrante ou sutil para obter uma aparência de vidro equilibrada e, em seguida, refine-a para combinar com o seu design.
Afinar o vidro
Arraste os controles deslizantes de desfoque de fundo, transparência e saturação, escolha uma cor de tonalidade e defina o raio do canto. As atualizações de visualização vivem sobre um cenário colorido para que o desfoque seja visível.
Alternar a borda
Ligue ou desligue a borda do cabelo. Uma sutil borda branca translúcida de 1px vende a borda do vidro, especialmente em fundos mais escuros.
Copie o CSS
Copie o bloco gerado - fundo, fundo-filtro (com - prefixo webkit-), borda-raio, borda, e sombra - e cole-o em seu cartão ou painel.
Principais características
Controle de desfoque de fundo
Um controle deslizante desfoque dedicado aciona o filtro de fundo, que gee tudo o que está atrás do elemento - o núcleo do efeito de vidro
Estilo de superfície completo
Transparência, saturação, cor de tonalidade, raio de canto e uma borda capilar opcional permitem que você disque o visual exato de vidro
Visualização ao vivo
A visualização fica sobre um gradiente colorido para que você possa ver o desfoque do pano de fundo funcionando, atualizando instantaneamente enquanto edita
Saída prefixada
A saída inclui o prefixo de filtro de pano de fundo e o prefixo -webkit-panograma de filtro, portanto, o efeito funciona no Safari e em outros navegadores WebKit
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!