Gradient CSS: linear e radial
I gradienti CSS creano transizioni fluide tra colori.
Linear gradient
.gradient {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
/* Direzioni: to right, to bottom, 45deg, etc. */
}
/* Con più colori */
.rainbow {
background: linear-gradient(90deg, red, orange, yellow, green, blue);
}Radial gradient
.radial {
background: radial-gradient(circle, #fff, #000);
}
.spotlight {
background: radial-gradient(circle at top left, #fff 0%, transparent 50%);
}Gradienti come overlay
.hero {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("image.jpg") center/cover;
}