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 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 fosco, escuro ou vibrante, ajuste os controles deslizantes e copie o CSS — incluindo o filtro de pano de fundo prefixado -webkit para um suporte mais amplo. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.
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.
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.
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 bloco gerado — plano de fundo, filtro de pano de fundo (com -webkit- prefixo), borda-raio, borda e sombra — e cole-o em seu cartão ou painel.
Um controle deslizante de desfoque dedicado aciona o filtro de pano de fundo, que geada o que estiver por trás do elemento - o núcleo do efeito de vidro
Transparência, saturação, cor de tonalidade, raio de canto e uma borda capilar opcional permitem que você disque o visual exato de vidro
A visualização fica sobre um gradiente colorido para que você possa ver o desfoque do pano de fundo funcionando, atualizando instantaneamente enquanto edita
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
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!