10 CSS Gradient Tricks Every Developer Must Know in 2026

/* Hard stops — no transition between colors */
background: linear-gradient(
  90deg,
  #6366F1 0%   33%,
  #34D399 33%  66%,
  #FBBF24 66%  100%
);

/* Tailwind JIT equivalent */
className="bg-[linear-gradient(90deg,#6366F1_0%_33%,#34D399_33%_66%,#FBBF24_66%)]"

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366F1, #C084FC, #34D399, #FBBF24
  );
  background-size: 400% 400%;
  animation: gradShift 6s ease infinite;
}

@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(
    90deg, #818CF8, #C084FC, #34D399
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tailwind utility */
className="bg-gradient-to-r from-indigo-400 via-purple-400
           to-emerald-400 bg-clip-text text-transparent"

.gradient-border {
  border: 2px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#0F1220, #0F1220) padding-box,
    linear-gradient(90deg, #6366F1, #34D399) border-box;
}

/* The trick: two backgrounds layered —
   solid color on padding-box hides the bg,
   gradient on border-box shows through the border */

/* Donut progress ring — 65% filled */
.progress-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    #6366F1 0% 65%,
    #1e2035 65% 100%
  );
}

/* Pie chart — 3 segments */
.pie {
  background: conic-gradient(
    #34D399 0%  40%,
    #FBBF24 40% 70%,
    #F87171 70% 100%
  );
}

.mesh-bg {
  background:
    radial-gradient(
      ellipse at 20% 30%,
      rgba(129,140,248,0.5) 0%, transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(52,211,153,0.4) 0%, transparent 55%
    ),
    radial-gradient(
      ellipse at 60% 20%,
      rgba(251,146,60,0.35) 0%, transparent 50%
    ),
    #080B12;
}

/* Parent must have a colorful/gradient background */
.glass-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Gradient backdrop for the glass to sit on */
.glass-bg {
  background: linear-gradient(
    135deg,
    rgba(129,140,248,0.45),
    rgba(52,211,153,0.3)
  );
}

/* Diagonal stripe texture */
.stripe-bg {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(129,140,248,0.08) 0px,
      rgba(129,140,248,0.08) 1px,
      transparent 1px,
      transparent 12px
    );
  background-color: #0F1220;
}

/* Grid dot pattern variant */
.dot-grid {
  background-image:
    radial-gradient(rgba(129,140,248,0.25) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* CSS — spotlight layer */
.spotlight {
  background: radial-gradient(
    600px circle at var(--x, 50%) var(--y, 50%),
    rgba(129,140,248,0.18) 0%,
    transparent 70%
  );
}

/* JS — track mouse position */
el.addEventListener('mousemove', (e) => {
  const rect = el.getBoundingClientRect();
  el.style.setProperty('--x', `${e.clientX - rect.left}px`);
  el.style.setProperty('--y', `${e.clientY - rect.top}px`);
});

/* Define once in :root */
:root {
  --grad-from: #6366F1;
  --grad-via:  #C084FC;
  --grad-to:   #34D399;
  --grad-deg:  135deg;
}

/* Use anywhere */
.btn-primary {
  background: linear-gradient(
    var(--grad-deg),
    var(--grad-from),
    var(--grad-via),
    var(--grad-to)
  );
}

/* Switch entire theme by changing vars */
[data-theme="sunset"] {
  --grad-from: #FB923C;
  --grad-to:   #F43F5E;
}