multiple mask-radial support

[Xentox-Phil]

I am trying to apply two mask-radial styles to my image component of next.js.

Sadly only the last one get picked so my solution was adding the images two times with different masks applied.

        <Image
          src={productCardBg}
          alt="Card background"
          fill
          sizes="(max-width: 1024px) 100vw, 50vw"
          className="mask-radial-[10rem_10rem_at_top_right,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%] object-cover"
        />
        <Image
          src={productCardBg}
          alt="Card background"
          fill
          sizes="(max-width: 1024px) 100vw, 50vw"
          className="mask-radial-[10rem_10rem_at_bottom_left,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%] object-cover"
        />

Any suggestions on how to do this with just a single image?

I just browsed the docs and found this about it in the docs:

Combining masks
Gradient mask utilities, like mask-radial-from-, mask-conic-to-, and mask-l-from- can be combined to create more complex gradient masks:

seems like this is not possible until yet.

Can we add this as feature request?

[wongjn]

You should be able to set multiple mask-image values using a mask-[] arbitrary value class: https://play.tailwindcss.com/0M2vT73zwC

[Xentox-Phil]

Wow thank you for your quick reply ❤️.

Do you know how i can refactor that with a little css or i can reuse some parts because i only want to switch sizes at a specific breakpoint and it feels kind of verbose.

className={`mask-[radial-gradient(7rem_7rem_at_top_right,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%),radial-gradient(7rem_7rem_at_bottom_left,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%)] object-cover @md/product-section:mask-[radial-gradient(10rem_10rem_at_top_right,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%),radial-gradient(10rem_10rem_at_bottom_left,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0.4)_50%,rgba(0,0,0,0.1)_80%,transparent_100%)]`}

[wongjn]

You should be able to use CSS variables to abstract common things out.

[Xentox-Phil]

:root {
  --gradient-subtle-stops:
    rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 80%, transparent 100%;
  --mask-size-sm: 7rem 7rem;
  --mask-size-lg: 10rem 10rem;
}

@layer utilities {
  .mask-dual-radial {
    mask:
      radial-gradient(var(--mask-size-sm) at top right, var(--gradient-subtle-stops)),
      radial-gradient(var(--mask-size-sm) at bottom left, var(--gradient-subtle-stops));
  }

  @container product-section (min-width: 28rem) {
    .mask-dual-radial-lg {
      mask:
        radial-gradient(var(--mask-size-lg) at top right, var(--gradient-subtle-stops)),
        radial-gradient(var(--mask-size-lg) at bottom left, var(--gradient-subtle-stops));
    }
  }
}

And the Image component looks now like this:

<Image
  src={productCardBg}
  alt="Card background"
  fill
  sizes="(max-width: 1024px) 100vw, 50vw"
  className="mask-dual-radial mask-dual-radial-lg object-cover"
/>

This would be my solution.

Any ideas of further improvement?

[wongjn]

I'd consider making them into real utility classes:

@theme {
  --mask-size-sm: 7rem 7rem;
  --mask-size-lg: 10rem 10rem;
}

@layer theme {
  :root {
    --gradient-subtle-stops: rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 80%, transparent 100%;
  }
}
  
@utility mask-dual-radial-* {
  --size: --value(--mask-size-*, [length]);
  --size: --spacing(--value(integer));
  mask:
    radial-gradient(var(--size) at top right, var(--gradient-subtle-stops)),
    radial-gradient(var(--size) at bottom left, var(--gradient-subtle-stops));
}

<Image
  src={productCardBg}
  alt="Card background"
  fill
  sizes="(max-width: 1024px) 100vw, 50vw"
  className="mask-dual-radial-sm @md/product-section:mask-dual-radial-lg object-cover"
/>

This makes the class names follow Tailwind patterns, thus being able to be more composable in more situations.