How to prevent darkened overlapping of text with reduced letter spacing in html/css

Question

The text upon overlapping darken as in letter 'R' and 'A'. I want either to be on top of the other(or any other way to prevent this).

My code

.gradient-text-wrapper {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Arial', sans-serif;
}

.gradient-text {
  font-size: 10rem;
  font-weight: bold;
  background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 0, 0, 0.18);
  position: relative;
  z-index: 1;
  mix-blend-mode: lighten;
  letter-spacing: -1.1rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="centered">
  <div class="gradient-text-wrapper">
    <span class="gradient-text">Gradient</span>
  </div>
</div>

I assume that the darkened spots are because of the translucent text-fill, which is necessary :(. I used this approach for gradient text because the actual thing is part of something bigger (for getting a text-shadow i have the same text behind this in actual project).

Answer 1

Depending on what browser you need to support you could use color-mix in the gradient, to mix in the color there instead of overlying it with transparancy.

.gradient-text-wrapper {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Arial', sans-serif;
}

.gradient-text {
  font-size: 10rem;
  font-weight: bold;
  --color: rgba(255, 0, 0);
  --weight: 18%;
  background: linear-gradient( 86deg, color-mix(in srgb, var(--color) var(--weight), #FBFF6B) 15.27%, color-mix(in srgb, var(--color) var(--weight), #D66A6A) 51.02%, color-mix(in srgb, var(--color) var(--weight), #A600F4) 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
  mix-blend-mode: lighten;
  letter-spacing: -1.1rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="centered">
  <div class="gradient-text-wrapper">
    <span class="gradient-text">Gradient</span>
  </div>
</div>