tailwindcss : from-muted/10 from-10% to-muted/30 to-50%

Question

  return (
    <div className="fixed inset-x-0 bottom-0 bg-red-100 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%">
      <ButtonScrollToBottom />

      </div>
    </div>
  )

what does 'from-muted/10 from-10% to-muted/30 to-50%' mean ?
I didn't get anything from google and tailwindcss web .

Answer 1

from-muted/10 is a color stop for the gradient bg-gradient-to-b. muted would be a custom color in the Tailwind configuration this code is from. /10 is an opacity modifier for the color, setting the alpha channel to 0.1 opacity.

from-10% is the position of the from-* color stop, 10%.

to-muted/30 is the end color stop for the gradient, with 0.3 opacity modifier. to-50% means the end color stop is positioned at 50%.

To translate this back to vanilla CSS:

selector {
  background-image: linear-gradient( /* bg-gradient-to-b */
    to bottom,                       /* bg-gradient-to-b */
    rgb(<color> / 0.1) /* from-muted/10 */ 10% /* from-10% */,
    rgb(<color> / 0.3) /* to-muted/30 */   50% /* to-50% */
  );
}

without-annotations {
  background-image: linear-gradient(
    to bottom,
    rgb(<color> / 0.1) 10%,
    rgb(<color> / 0.3) 50%
  );
}