Feb 22, 2026

Needed to fill the background of a website hero section with a complex gradient. Two large radial gradients, one in the top-right area, and one in the bottom-left area. Large enough to overlap considerably. Nearly transparent, but based on solid colors. I give you, color-mix.

.gradient-hero {
  background:
    radial-gradient(
      ellipse at 110% -5%, 
      color-mix(
        in srgb, 
        var( --brand-purple ) 25%, 
        transparent
      ) 0%, 
      transparent 55%
    ),
    radial-gradient( 
      ellipse at -10% 105%, 
      color-mix( 
        in srgb, 
        var( --brand-cyan ) 18%, 
        transparent
      ) 0%, 
      transparent 55%
    );
}

/* Bonus: Fade to white at the bottom */
.gradient-hero::after {
  background: linear-gradient( to bottom, transparent, white );
  bottom: 0;
  content: '';
  height: 150px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}