Styled text in css

HTML & CSS
1

i have a problem creating a text to look like this in pic

art
art245Ă—117 7.13 KB

<!DOCTYPE html>
<html>
<head>
<style>
.text-span {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #f1fcac, #7effc5 50%, #62b7ff);
    -webkit-background-clip: text;
    background-clip: text;
}
</style>
</head>
<body style="background-color: #000;">
  <p style="font-size: 100px;" class="text-span">Logo</p>
</body>
</html>
2

Add a max-content width to the element to make the gradient obey the text length and not the whole line.

.text-span {
 width:max-content;
}
3

thanks @PaulOB

1 Like
4

if you don’t mind @PaulOB, can you help me how to animate this linear-gradient
Thanks

5

With gradients you can only animate the background-position (without using the new property value) so you could do something like this.

body {
  background-color: #000;
}
.text-span {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #f1fcac,
    #7effc5 25%,
    #62b7ff,
    #7effc5 75%,
    #f1fcac
  );
  -webkit-background-clip: text;
  background-clip: text;
  width: max-content;
  background-size: 200% 100%; /* Double the size */
  animation: gradient 4s linear infinite;
}

@keyframes gradient {
  50% {
    background-position: 100% 50%;
  }
}

https://codepen.io/paulobrien/pen/xbxmmXN

For more precise control you could use the new property syntax but is a little more complicated.

Here is a pen explaining it that I forked from the original article.
https://codepen.io/paulobrien/pen/MYWXLav/de11a0f58974e27921f6b5c1bafb736f

1 Like
6

thanks so much

1 Like
7

Instead of using proprietary extensions, wouldn’t “color” and only “background-clip” work? Something to think about unless you know all clients are webkit-based.

1 Like
8

No the color property is completely different and doesn’t allow background to be clipped to the text characters.

The -webkit-text-fll-color is actually now supported in all major evergreen browsers* although it was originally proprietary. As there is no new spec for this it will be safe to use but if you really want to be careful you could throw the code in an @supports rule and let older browsers just have normal coloured text and not transparent..

@supports (-webkit-background-clip: text) {
  .fancy-text {
    background: linear-gradient(to right, #f00, #00f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

In most cases it’s best to avoid proprietary code but with support as broad as this and the ease in which a fall-back can be made it makes sense to just use it :slight_smile:

1 Like
9

Yeah, I saw that in MDN. I tested my suggestion in your code pen with Firefox before I posted and didn’t see a difference.

1 Like
11

Actually you are now correct and I was wrong :blush: due to recent updates and using color:transparent and background-clip-text will work in latest versions of Firefox. I would still use the prefix versions for a while though as I haven’t fully tested this. I remember testing some months ago and it didn’t work reliably but these days browsers are adding new features quite quickly.

https://codepen.io/paulobrien/pen/zxYXqqy/7758f0bbf6c73c61f371b9eee977e87b

1 Like