Gradient colour with Linear Gradient Border in text using css not working

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;
}

Does your problem involve no background colour being applied to the form — akshay kishore
– akshay kishore, Commented May 20, 2019 at 8:07
@MarcHjorth gradient colour or gradient border only one of them working i have allready try this. — Avruti
– Avruti, Commented May 20, 2019 at 8:35
is this ionic 4 ? What exactly isnt working, is it just the background or is it everything ? what element are you applying this on, as it may not be applicable due to the shadow dom ? providing html would be useful — Ira Watt
– Ira Watt, Commented May 20, 2019 at 8:54
the last background declartion is erasing the first background-image and also the background-clip — Temani Afif
– Temani Afif, Commented May 20, 2019 at 8:56

Temani Afif · Accepted Answer · 2019-05-20 09:50:21Z

8

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>

edited May 20, 2019 at 9:50

answered May 20, 2019 at 9:44

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Persijn · Accepted Answer · 2019-05-21 10:16:54Z

3

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:

Define two gradient one for the background one for the text. (LinearGradient)
Create background and text. (rect, and text, tspan)
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>

edited May 21, 2019 at 10:16

answered May 21, 2019 at 8:17

Persijn

15.1k4 gold badges46 silver badges73 bronze badges

3 Comments

Temani Afif Over a year ago

How can we add another gradient to color the text? I tried to replace the fill="#f5e43e" with a gradient but it's not working.

Persijn Over a year ago

@TemaniAfif Create a new linearGradient with an ID, then you can replace the fill like this: fill="url(#ID)" where ID is the id of the gradient you want selected.

Temani Afif Over a year ago

yes, nevermind. I was using bad values for x/y so I wasn't able to correctly see it.

Collectives™ on Stack Overflow

Gradient colour with Linear Gradient Border in text using css not working

2 Answers 2

Comments

Gradients on text

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Gradients on text

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related