Gerador de efeitos CSS

Border-radius, vidro, neumorfismo, sombra de texto, filtros e clip-path em CSS.

Presets
Top left
Top right
Bottom right
Bottom left
Preview

O que faz

Seis efeitos CSS com prévia desenhada pelo seu navegador e o código pronto para copiar. Border radius com os oito valores (raio horizontal e vertical de cada canto) para manchas, folhas e ovos, escrito na forma mais curta. Vidro com fundo translúcido, backdrop-filter com desfoque e saturação, borda clara, prefixo -webkit- e uma alternativa para navegadores sem suporte. Neumorfismo com superfícies suaves a partir de uma cor base. Sombra de texto em várias camadas. Filtros (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) sobre uma imagem de exemplo ou a sua, que nunca é enviada. Clip-path com polígonos regulares, estrelas, setas e balões de fala.

Legibilidade

No vidro, o texto é lido contra o fundo desfocado misturado com a cor; a ferramenta estima essa cor e mostra o pior contraste. A WCAG AA pede 4,5:1 para texto normal. No neumorfismo a borda escura costuma ficar perto de 1,4:1 em relação ao fundo, abaixo dos 3:1 que a WCAG 1.4.11 pede para controles, então acrescente uma borda, um ícone ou um rótulo. O Safari anterior à versão 18 precisa de -webkit-backdrop-filter, incluído no código.

Perguntas frequentes

Por que o desfoque não aparece?

backdrop-filter desfoca o que está atrás; o fundo do elemento precisa ser parcialmente transparente.

Neumorfismo é acessível?

Não sozinho: o contraste das bordas costuma ficar abaixo de 3:1.

A ordem dos filtros importa?

Sim, cada função é aplicada sobre o resultado da anterior.