Efeitos: gradientes, sombras e bordas — Tipografia, cor e efeitos

De plano a polido

Aqui está o toque final. Com três famílias de propriedades o design passa de "correto" a "caprichado": gradientes, sombras e cantos arredondados. São baratos de escrever e difíceis de imitar a olho: justamente o que dá aquele ar de produto pronto.

Gradientes

Um gradiente é uma imagem gerada pelo CSS, então vai em background (ou background-image), não em color.

.linear {
  background: linear-gradient(to right, #6366f1, #ec4899);
}
.diagonal {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee, #a7f3d0);
}
.radial {
  background: radial-gradient(circle, #fde047, #f97316);
}

linear-gradient(direção, color1, color2, …): degradê em linha reta. A direção pode ser to right, to bottom, ou um ângulo (135deg).
radial-gradient(forma, …): irradia do centro para fora.
Você pode encadear muitas paradas de cor.

Sombras

box-shadow projeta a sombra da caixa; text-shadow, do texto. A sintaxe básica é deslocamentoX deslocamentoY desfoque cor.

.tarjeta {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.titulo {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.afundado {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);  /* sombra interna */
}

Os dois primeiros valores movem a sombra (positivo = direita/baixo).
O terceiro (blur) a desfoca; quanto maior, mais suave.
inset a coloca dentro da caixa.

Cantos arredondados

.boton {
  border-radius: 8px;     /* cantos suaves */
}
.avatar {
  border-radius: 50%;     /* círculo perfeito (em uma caixa quadrada) */
}
.pildora {
  border-radius: 999px;   /* extremidades totalmente arredondadas */
}

Combinando os três efeitos você consegue cartões, botões e selos com visual moderno sem uma única imagem. Uma sombra suave, um canto arredondado e um gradiente de marca: aí está a diferença entre uma landing que parece um modelo pronto e outra que parece sua.

Exemplos

Um cartão com gradiente, sombra e cantos suaves

.tarjeta {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 24px;
}