Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de sombras CSS
Ajuste deslocamento, desfoque, expansão, cor e opacidade para criar uma sombra externa ou interna em CSS.
Prévia
Sobre a ferramenta
Dê profundidade a um cartão avaliando desfoque e expansão separadamente. Uma expansão negativa reduz o contorno da sombra.
Como usar
Mude os controles e acompanhe a prévia. A opção interna ativa inset. Deslocamentos e expansão podem ser negativos, mas desfoque não. As dimensões vão de -200 a 200 px e o desfoque de 0 a 200 px. A ferramenta gera uma camada de box-shadow, que pode ser copiada ou baixada.
Perguntas frequentes
Qual a diferença entre desfoque e expansão?
O desfoque suaviza as bordas; a expansão aumenta ou reduz o contorno. inset cria uma sombra interna. A ferramenta gera uma camada; combine várias depois no CSS.
Como deslocar a sombra para a esquerda ou para cima?
Use deslocamento horizontal negativo para a esquerda e vertical negativo para cima. Valores positivos vão para direita e baixo. box-shadow acompanha a caixa, não o contorno das partes opacas de uma imagem.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0