CSS Gradients Deep Dive

Gradients can be linear, radial, or conic (CSS 4). Syntax:

linear-gradient(to right, #ff7e5f, #feb47b);
radial-gradient(circle at center, #e0eafc, #cfdef3);
conic-gradient(from 90deg at 50% 50%, #ff0, #f0f, #0ff);

You can animate gradient stops with @keyframes for a shimmering effect.

---

Example: Animated gradient background

@keyframes hueShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.banner {
  background:linear-gradient(270deg, #ff6b6b, #f7d794, #5f27cd);
  background-size:600% 600%;
  animation:hueShift 12s ease infinite;
}