Inset CSS Box Shadow – Código pronto
Crie código CSS box-shadow visualmente: controles deslizantes para deslocamento, desfoque, propagação, cor com opacidade, modo de inserção e até quatro camadas com visualização ao vivo.
Resultado
Esta página abre o gerador de sombra de caixa com a caixa de seleção de inserção já marcada, para que a sombra seja desenhada dentro do elemento em vez de atrás dele. O cartão de visualização mostra o efeito afundado de uma só vez, e cada controle deslizante continua atualizando a linha CSS ao vivo.
As sombras inseridas são como o CSS simula a profundidade para dentro: estados de botões pressionados, campos de pesquisa e poços de entrada, depressões da barra de progresso e painéis gravados, todos dependem delas. Como a sombra envolve a borda interna, o desfoque e a propagação se comportam de maneira um pouco diferente de um sombreamento normal – os controles deslizantes aqui permitem que você sinta essa diferença imediatamente.
Quando a aparência afundada estiver correta, copie a linha box-shadow em sua folha de estilo. Você também pode combinar uma camada de inserção com camadas externas regulares — adicione uma segunda camada e desmarque a inserção nela para misturar ambas em uma declaração.