[Feature] Add gradient effect in `.info-content .name`

[1chooo]

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff, #adadad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[1chooo]

::selection { background: var(--orange-yellow-crayola); color: var(--smoky-black); }

I have the upper style

but if I set the text background in linear-gradient, if I select the text all of the text not showed, it should be yellow background and black text, how do I fix it

.info-content .name { color: var(--white-2); font-size: var(--fs-3); font-weight: var(--fw-600); letter-spacing: -0.25px; margin-bottom: 10px; background: linear-gradient(180deg, #fff, #adadad); / for light theme / / background: linear-gradient(180deg, #555, #000); / background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

[1chooo]

To achieve the desired selection styling on text with a gradient background, we can add a workaround since the linear gradient with background-clip: text does not play well with ::selection. Here are two options to make sure the text is readable with the selected background and color:

Solution 1: Apply a Transparent Gradient Overlay

You can add a transparent text fill color on selection, which allows the ::selection background and text color to apply correctly. Here’s how:

/* Selection styling */
::selection {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
}

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff, #adadad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Selection override for .name */
.info-content .name::selection {
  -webkit-text-fill-color: var(--smoky-black); /* Applies black color to text */
  color: var(--smoky-black); /* Fallback for non-WebKit browsers */
  background: var(--orange-yellow-crayola);
}

This code snippet overrides the selection for .name and allows you to control the color without affecting the gradient. The -webkit-text-fill-color set to black ensures that selected text is readable.

Solution 2: Use a Separate Shadow for Selection

Another option is to add a subtle text-shadow to simulate the gradient color but still allow a solid color on selection.

.info-content .name {
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
  color: var(--white-2);
  background: linear-gradient(180deg, #fff, #adadad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.4);
}

/* Override selection */
.info-content .name::selection {
  background: var(--orange-yellow-crayola);
  -webkit-text-fill-color: var(--smoky-black);
  color: var(--smoky-black);
}

The shadow here will add a bit of color and make the gradient effect visible, while also ensuring readability during text selection.