Html Question posted in
Some basic documentation can be found here.

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

result on webpage

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Text with Shadow</title>
  <style>
    .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;
}

  </style>
</head>
<body>
  <div class="centered">
    <div class="gradient-text-wrapper">
      <span class="gradient-text">Gradient</span>
    </div>
  </div>
</body>
</html>

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).

Tags:

4

Answers


  1. 0

    To prevent the darkening effect on overlapping parts of the letters while maintaining the gradient and translucent text fill, you can use a combination of ::before pseudo-elements and opacity to achieve a cleaner result. This method involves layering a non-translucent version of the text behind the translucent one.

    Login or Signup to reply.
  2. 0

    You can, for example, use mix-blend-mode:screen;. I also assume that the spaces between the letters are intentional…

    .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: transparent;
  position: relative;
  z-index: 1;
  mix-blend-mode: screen;
  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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    You may just use mix-blend-mode instead background-clip.

    here is the idea with a background image on html:

    .gradient-text-wrapper {
  display: inline-block;
  text-transform: uppercase;
  font-family: "Arial", sans-serif;
  background: linear-gradient( 86deg, #fbff6b 15.27%, #d66a6a 51.02%, #a600f4 99.78%);
  mix-blend-mode: multiply;  /* here picked up to mix with html background, up to your choice  */
}

.gradient-text {
  display: block;
  font-size: clamp(40px, 18vw, 10rem);/* for the demo, make it fully visible inside snippet */
  padding-inline: 0 .5em;  /* > negative letter-spacing, to increase with text lenght */
  font-weight: bold;
  background: white;
  mix-blend-mode: lighten;
  letter-spacing: -.11em; /* for demo keep the ratio */
}


/* demo */

html {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: url(https://picsum.photos/id/46/3264/2448) center / cover;
}
    <div class="gradient-text-wrapper">
  <span class="gradient-text">Gradient</span>
</div>

    enter image description here
    Note that the color-mix methode is in my own opinion the most efficient here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search