CSS Gradients — Linear, Radial, Conic + 6 Copy-Paste Recipes

background: linear-gradient(135deg, #6d6ffb, #8b5cf6);
background: radial-gradient(circle at top right, #6d6ffb, transparent 70%);
background: conic-gradient(#22c55e 0 75%, #333 75%);  /* instant pie/progress ring */

/* 1. Gradient text (this site's headlines) */
.grad-text {
  background: linear-gradient(135deg, #818cf8, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2. Gradient border */
.card {
  border: 2px solid transparent;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(135deg, #6d6ffb, #ec4899) border-box;
}

/* 3. Animated gradient */
.hero {
  background: linear-gradient(270deg, #6d6ffb, #ec4899, #f97316);
  background-size: 600% 600%;
  animation: shift 8s ease infinite;
}
@keyframes shift { 50% { background-position: 100% 50%; } }

/* 4. Subtle mesh (layered radials) */
background:
  radial-gradient(at 20% 30%, rgba(109,111,251,.3), transparent 50%),
  radial-gradient(at 80% 70%, rgba(236,72,153,.2), transparent 50%), #0a0a10;