São tipos especiais de imagens que consistem na transição progressiva entre duas ou mais cores.

Podem ser passadas como parâmetro na propriedade background-image.

➡️ Linear Gradients

A transição das suas cores ocorre ao longo de uma linha reta.

Podem ser criados com a função linear-gradient().

Caso se especifique só cores, o gradiente começará em cima com a primeira cor mencionada e se estenderá para baixo, seguindo a ordem das cores definidas.

.box {
    background-image: linear-gradient(cyan, 
																	    yellow, 
																	    magenta);
}

Pode-se especificar uma inclinação antes das cores também:

.box {
    background-image: linear-gradient(45deg,
																	    cyan, 
																	    yellow, 
																	    magenta);
}

Também é possível especificar o sentido/inclinação usando keywords:

.box {
    background-image: linear-gradient(to right,
																	    cyan, 
																	    yellow, 
																	    magenta);
}

Caso se deseje que as cores apareçam em proporções diferentes, pode-se especificar uma porcentagem após a cor, que indicará o ponto onde ela começará a aparecer (não representa o quanto do gradiente ela tomará).

.box {
	background-image: linear-gradient(cyan,
																		yellow 20%,
																		magenta 40%);
}

🎆 Radial Gradients