Black Outline Issue Around Text with CSS Gradient

I’m trying to create text with a gradient effect using CSS, but I’m noticing that there’s a black outline around the letters, which is not the desired effect. Here’s the CSS I’m using:

div.marge { height: 100vh; }
* { font-size: 50px; color: black; }

span.white {
    text-decoration: none;
    background: linear-gradient(27deg, rgba(255, 0, 255, 1) 0%, rgba(43, 255, 255, 1) 100%) no-repeat,
                linear-gradient(27deg, #000000 0%, #000000 100%) no-repeat;
    background-size: 125% 100%, 100% 100%;
    background-position: 0% 50%, 0% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 2px;
    background-repeat: no-repeat;
}

You can see an example of this issue on my CodePen : https://codepen.io/Smartson/pen/wvVdWjV

I would like to know how I can remove this black outline while keeping the colorful gradient on the text. Do you have any suggestions to resolve this issue?

Thanks in advance for your help!

I’ve tried using text-shadow and text-stroke, but they haven’t resolved the issue.

You need to sign in to view this answers

Related Post