Gerador de gradiente e sombra CSS
Crie gradientes e sombras de caixa com prévia e copie o código CSS.
Gradiente
Você pode usar de 2 a 5 pontos, e eles são exibidos ordenados por posição, da menor para a maior.
Prévia
CSS gerado
Sombra de caixa
Você pode usar até 4 camadas de sombra.
Prévia
CSS gerado
Como usar o gerador de gradiente e sombra CSS
A prévia e o código CSS são atualizados assim que você muda um valor. Quando gostar do resultado, pressione Copiar CSS e cole na sua folha de estilo.
Limites
- As cores aceitam apenas hex nas formas #RGB, #RGBA, #RRGGBB ou #RRGGBBAA, e o # inicial pode ser omitido.
- Números fora do intervalo são ajustados ao valor permitido mais próximo. O ângulo é 0–360, posição e opacidade são 0–100, deslocamentos e espalhamento vão de -200 a 200, e o desfoque é 0–200.
- Os números são usados com até 2 casas decimais.
- Gradientes radiais são sempre círculos que se espalham a partir do centro.
Perguntas frequentes
Minha entrada é enviada a um servidor?
Não. Tudo é calculado dentro deste navegador, e o que você digita e os resultados não são salvos nem enviados. Recarregar volta aos valores iniciais.
Mudar a ordem dos pontos altera o resultado?
O CSS gerado é sempre ordenado da menor posição para a maior. Pontos na mesma posição mantêm a ordem em que você os digitou.
Como a opacidade é aplicada?
Se a cor da sombra tiver um alfa em um hex de 8 dígitos, ele é multiplicado pela opacidade (%) e exibido como rgba(). Se não for transparente, é exibido como hex de 6 dígitos.