CSS Gradient Generator: Linear, Radial & Conic (2026)

/* 1. Ultra-Premium Aurora Glassmorphic Glow Header */
.premium-hero-glow {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c084fc 100%);
  position: relative;
  z-index: 1;
}

/* GPU Hardware-Accelerated Ambient Glow Blur Behind Element */
.premium-hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(120px);
  opacity: 0.4;
  z-index: -1;
  transform: translateZ(0); /* Forces GPU rendering */
}

/* 2. Spotlight Radial Effect for Feature Cards */
.spotlight-interface-card {
  background-color: #020617;
  border: 1px solid rgba(99, 102, 241, 0.15);
  position: relative;
  overflow: hidden;
}

/* Creates a sharp subtle modern ceiling spotlight drop */
.spotlight-interface-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* 3. Futuristic Conic Gradient Border Spin Layout */
.neon-conic-border-box {
  position: relative;
  border-radius: 1.25rem;
  background: #090514;
  padding: 2px; /* Acting as the sharp border width */
  overflow: hidden;
}

/* Conic stacking that flows seamlessly like a live rainbow track */
.neon-conic-border-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #6366f1, #ec4899, #38bdf8, #6366f1);
  animation: spinColors 4s linear infinite;
  z-index: -1;
}

@keyframes spinColors {
  100% { transform: rotate(360deg); }
}