Como criar gradientes lineares e radiais como plano de fundo com CSS
Gradientes são transições suaves entre duas ou mais cores. No CSS, eles são usados como valor da propriedade background-image e existem em dois tipos principais: linear e radial.
A função linear-gradient() cria uma transição de cores em linha reta.
Carregando...Por padrão, a transição vai de cima para baixo. Você pode mudar a direção:
Carregando...Um gradiente pode ter quantas cores quiser:
Carregando...Você também pode controlar onde cada cor começa, definindo a posição em porcentagem:
Carregando...A função radial-gradient() cria uma transição que parte de um ponto central em direção às bordas.
Carregando...circle: forma circular;ellipse: forma elíptica (padrão).Carregando...Uma técnica muito comum é combinar gradiente e imagem para criar efeitos de texto legível sobre foto:
Carregando...O gradiente semitransparente cria um escurecimento sobre a imagem, facilitando a leitura do texto por cima.