Crie caixas com sombras realistas e efeitos de vidro fosco com cópia rápida de código CSS.
Crie caixas com sombras realistas e efeitos de vidro fosco com cópia rápida de código CSS. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.
Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.
Esta ferramenta permite criar sombras CSS e efeitos de vidro fosco com controles deslizantes, ver o resultado ao vivo em um cartão e copiar o CSS pronto para colar no seu projeto. Na aba Box Shadow, cada camada tem deslocamento horizontal e vertical (-50 a 50 px), raio de desfoque (0 a 100 px), raio de expansão (-30 a 50 px), cor com opacidade e uma caixa Inset para sombras internas. A saída padrão é box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); com as cores no formato rgba.
Use o botão de adicionar camada para empilhar várias sombras; elas são unidas por vírgulas e a primeira da lista é desenhada por cima. Sombras realistas costumam combinar uma camada próxima e nítida com outra distante e suave. O modelo 3D Double, por exemplo, junta 0 5px 5px e 0 20px 25px em preto de baixa opacidade, o que fica mais natural do que uma única sombra grande. Uma expansão negativa deixa a sombra menor que o elemento, truque comum para sombras suaves sob cartões, e o modelo Glow Light usa uma cor da marca, deslocamento zero e muito desfoque para criar um brilho.
A aba Glassmorphism cria cartões de vidro fosco: ajuste o desfoque do fundo (backdrop-filter: blur, 0 a 40 px), a cor de fundo e a opacidade, e a cor e a opacidade de uma borda de 1 px. O CSS gerado inclui backdrop-filter e o prefixo -webkit-backdrop-filter exigido pelo Safari. O segredo do efeito é um fundo semitransparente com algo atrás; sobre uma cor lisa não há o que desfocar, por isso a pré-visualização permite alternar entre fundos com degradê e escuros.
Algumas dicas práticas: aplicar backdrop-filter em áreas grandes pode pesar em celulares mais simples, então use em poucos cartões ou na barra de navegação. Cuide do contraste do texto sobre fundos translúcidos; se a opacidade estiver baixa, escureça a cor ou use uma fonte mais grossa. Os valores rgba funcionam direto com variáveis CSS ou com os valores arbitrários do Tailwind. Tudo roda no seu navegador, sem cadastro.
box-shadow aceita uma lista separada por vírgulas: a primeira sombra é desenhada por cima e cada uma das seguintes fica embaixo. Colocar primeiro uma sombra pequena e nítida e depois uma maior e mais suave cria uma profundidade convincente. Na ferramenta, a Layer #1 é a camada de cima.
Com Inset marcado, a sombra é desenhada dentro do elemento. Serve para campos de texto rebaixados, botões no estado pressionado ou um brilho sutil na borda superior de um cartão de vidro; o modelo Glass Inner usa exatamente uma sombra interna branca e fraca.
backdrop-filter desfoca o que está atrás do elemento, então a cor de fundo precisa ser semitransparente (opacidade menor que 1) e precisa haver uma imagem, um degradê ou outro conteúdo atrás. Sobre um fundo sólido o efeito quase não aparece. Mantenha também o -webkit-backdrop-filter para o Safari.
As versões atuais de Chrome, Edge, Firefox e Safari suportam; o Safari precisa do prefixo -webkit-, que o CSS gerado já inclui. Se precisar atender navegadores muito antigos, adicione uma cor de fundo mais opaca como alternativa.
Ver esta categoria: Design e cores
Avalie taxas de contraste entre texto e fundo com níveis AA/AAA e simule tipos de daltonismo.
Gere partículas, corpos elásticos, colisões e campos gravitacionais interativos em tempo real com Canvas.
Adicione pontos de ancoragem, arraste as alças de Bézier em uma tela de 500×500 e gere na hora o atributo d do caminho SVG e uma regra CSS clip-path: path().
Coloque prints de tela dentro de uma moldura de navegador estilo macOS com sombra e fundo gradiente e baixe em PNG de alta resolução.
