使用css的文本中带有线性渐变边框的渐变颜色不起作用

Question

I would like design £1 similar to the following image using CSS.

I would like to have some text with gradient colour, gradient border and text-shadow in this design. I tried the following code, but it doesn't work.

CSS:

.pound-lbl {
       background-image: linear-gradient(275deg, #f8e71c 0%, #f8bd1c 100%);
       -webkit-background-clip: text;
       color: #FFDE17;
       text-shadow: 0 2px 4px rgba(0,0,0,0.50);
       background: -webkit-linear-gradient(275deg,#F8CC1C 0%, #FFFFFF 100%);
       -webkit-background-clip: text;
       -webkit-text-stroke: 2px transparent;
}

Answer 1

I think the only way to have this effect is to duplicate the text. One will get the stroke coloration and the other the background coloration:

I used different colors to better identify them:

 span[data-text] { display:inline-block; font-size:90px; font-weight:bold; font-family:arial; position:relative; margin:10px; } span[data-text]:before { content:attr(data-text); text-shadow: 0 2px 20px purple; background: linear-gradient(to bottom,red 0%, blue 100%); -webkit-text-stroke: 5px transparent; -webkit-background-clip: text; background-clip: text; color:transparent; } span[data-text]:after { content:attr(data-text); left:0; top:0; position:absolute; background-image: linear-gradient(275deg, green 0%, yellow 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

 <span data-text="£1"></span>

Answer 2

Gradients on text

When you need to set gradients on text css is not the tool to use.
Its easier to use svg for advanced gradient and all complex shapes.

Here is how i would recomend to create the svg:

1. Define two gradient one for the background one for the text. ( LinearGradient )
2. Create background and text. (rect, and text, tspan)
3. Set the stroke and fill of the elements to the LinearGradients.

Here is how it would look:

 <!--viewBox cuts the shape so that there is little whitespace--> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" viewBox="0 40 100 60"> <defs> <!--Gradients defined to use later--> <linearGradient id="textGradient" x1="90" x2="90" y1="40" y2="60" gradientUnits="userSpaceOnUse"> <stop stop-color="#f2cb3c" offset="0"/> <stop stop-color="#ffffff" offset="1"/> </linearGradient> <linearGradient id="backgroundGradient" x1="0" y1="100" x2="0" y2="100" gradientUnits="userSpaceOnUse"> <stop stop-color="#5bc129" offset="0"/> <stop stop-color="#85de31" offset="1"/> </linearGradient> </defs> <!--Rect that covers the background--> <rect fill="url(#backgroundGradient)" stroke="none"; width="100" height="60" x="0" y="20"/> <g class="text" stroke="url(#textGradient)" fill="#f5e43e" stroke-width="0.5"> <text x="35" y="68" style="font-size:50px;font-family:Arial;"> <tspan>£1</tspan> </text> </g> </svg>