Feb 24, 2026

One last CSS snippet for good measure. Yes, this site required a lot of complex gradients. This CSS rule will fill the background of a container element with a linear gradient. On the diagonal. Based on solid colors, but nearly transparent. Thanks again color-mix function!

.gradient-box {
  background: 
    linear-gradient(
      to bottom right, 
      color-mix(
        in srgb, 
        var( --brand-purple ) 12%, 
        transparent
      ), 
      color-mix( 
        in srgb, 
        var( --brand-pink ) 12%, 
        transparent
      )
    );
}