Gerador de CSS
Gradientes, sombras e cantos ajustados visualmente
Opções
Resultado
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Cole a declaração copiada direto no seu seletor CSS.
A sintaxe de sombra e de gradiente tem quatro ou cinco números cujo efeito ninguém consegue imaginar pelo código. Arraste os controles até a pré-visualização ficar boa e leve a regra pronta.
Como usar
- 1 Escolha o que você quer montar.
- 2 Ajuste os controles e as cores olhando a pré-visualização.
- 3 Copie o CSS gerado.
- 4 Cole dentro do seu seletor.
Perguntas frequentes
O que significam os valores do box-shadow?
Deslocamento horizontal, deslocamento vertical, desfoque, expansão e cor. O desfoque suaviza a borda; a expansão aumenta ou reduz a sombra inteira antes do desfoque. Deslocamento vertical positivo com pouco desfoque passa a ideia de luz vindo de cima.
Como faço uma sombra parecer natural?
Mantenha o deslocamento horizontal perto de zero, use um deslocamento vertical pequeno e positivo, e um desfoque de duas a três vezes esse valor. Use preto com pouca opacidade em vez de cinza — sombras cinza ficam achatadas sobre fundos coloridos.
O que o inset faz?
Desenha a sombra dentro do elemento em vez de fora, o que dá a impressão de afundado em vez de elevado. Útil para campos de formulário e botões acionados.