I have achieved the following with [mask-image:linear-gradient(to_right,transparent_0%,#000_1%)]:

But I have no idea how to do the same for the right side. I have tried many different things but no luck. There seems to be no to_left parameter. Any help much appreciated!

I have achieved the following with [mask-image:linear-gradient(to_right,transparent_0%,#000_1%)]:

But I have no idea how to do the same for the right side. I have tried many different things but no luck. There seems to be no to_left parameter. Any help much appreciated!

• tailwind-css
• tailwind-css-4

2 Answers 2

Your code places it to the left by default. To position it on the right, either swap the colors or use to left.

To apply it on both sides, it needs to extend across the entire width, meaning it should logically start and end with transparency.

(from 90deg) to_right:
- left side: 0% (from)
- right side: 100% (to)

(from 270deg) to_left:
- left side: 100% (to)
- right side: 0% (from)

transparent 0%, #000 40%, #000 60%, transparent 100%
    /\                  /\                  /\
 left side            center             right side

See my example below:

<script src="https://cdn.jsdelivr/npm/@tailwindcss/browser@4"></script>

<div class="
  w-64 h-16 bg-yellow-100 text-center
  [mask-image:linear-gradient(to_right,transparent_0%,#000_40%)]
">Left side</div>

<div class="
  w-64 h-16 bg-yellow-200  text-center
  [mask-image:linear-gradient(to_left,transparent_0%,#000_40%)]
">Right Side</div>

<div class="
  w-64 h-16 bg-yellow-300  text-center
  [mask-image:linear-gradient(to_right,transparent_0%,#000_40%,#000_60%,transparent_100%)]
">
  Left & Right Side
</div>

To increase the transparent area, you need to increase the percentage on the left side and decrease it on the right side, following the example above. This is because the percentage indicates the point where the color blending starts.

<script src="https://cdn.jsdelivr/npm/@tailwindcss/browser@4"></script>

<div class="
  w-64 h-16 bg-yellow-300  text-center
  [mask-image:linear-gradient(to_right,transparent_10%,#000_40%,#000_60%,transparent_90%)]
  // transparent_10% first color from left side
">
  Left & Right Side (to_right)
</div>
<div class="
  w-64 h-16 bg-yellow-300  text-center
  [mask-image:linear-gradient(to_left,transparent_10%,#000_40%,#000_60%,transparent_90%)]
  // transparent_10% first color from right side
">
  Left & Right Side (to_left)
</div>

you could try using degrees to align the gradient

[mask-image:linear-gradient(270deg,transparent_0%,#000_20%)]