Gerador CSS glassmorphism
Gera CSS para painéis de vidro fosco ou superfícies neumórficas suaves a partir de alguns controlos deslizantes.
Gerador CSS glassmorphism
Crie uma regra CSS completa e pronta para colar para um painel de vidro fosco ou uma superfície neumórfica suave sem digitar nenhum valor à mão. Escolha glassmorphism para um cartão translúcido que desfoca o que está atrás dele — o estilo usado em painéis de controlo modernos, ecrãs de login e modais — ou neumorfismo para uma superfície que parece moldada no mesmo material que o fundo, usando um par de sombras suaves opostas em vez de transparência.
Os controlos mapeiam diretamente para as propriedades que a ferramenta escreve. No modo vidro, a opacidade da superfície e a intensidade do desfoque controlam o alfa de fundo e o desfoque backdrop-filter, enquanto a espessura da borda e o brilho da borda definem uma borda fina e semi-transparente que mantém o painel legível contra fundos ocupados. A distância da sombra e a suavidade moldam a sombra de projecção sob o painel, e o interruptor de forma muda-o para uma sombra encaixada para um aspecto recuado. No modo neumorfismo, os mesmos valores de distância e suavidade da sombra conduzem uma sombra clara e uma sombra escura calculadas a partir da cor da sua superfície, elevada ou pressionada dependendo da forma que escolher. O arredondamento dos cantos e uma variante de modo escuro aplicam-se a ambos os estilos.
Porque uma superfície fosca ou levemente sombreada pode aterrar num tom médio difícil de ler com texto preto ou branco, a ferramenta verifica o contraste resultante e adiciona um breve comentário de aviso acima do CSS quando nenhuma cor de texto se sentaria confortavelmente acima do WCAG AA — um incentivo para ajustar a cor da superfície ou opacidade em vez de adivinhar.
Tudo funciona localmente no seu navegador enquanto move os controlos deslizantes — sem ferramenta de design, sem conta e nada enviado para um servidor. Copie o CSS diretamente para a sua folha de estilos, descarregue como ficheiro .txt, ou envie a saída de volta para a entrada para continuar a ajustá-la.