CODEWITHSUNDEEP
htmlcsslinear-gradients
UselessIdiot
UselessIdiot

Reputation: 33

CSS Text with Linear Gradient, Shadow and Text Outline?

Is it possible to create text which has a linear gradient, a shadow and an outline.

My problem is that "-webkit-text-fill-color: transparent" is required for the gradient, so the shadow is on top of the text.

Is it possible to get the text on top of the shadow?

Here's my code: 

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  text-shadow: 15px 15px black; 
    }
<p>Some Text</p>

Upvotes: 3

Views: 1726

Answers (5)

SwissCodeMen
SwissCodeMen

Reputation: 4885

Try this:

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  filter: drop-shadow(15px 15px black);
}
<p>Some Text</p>

so you overwrite text-shadow

Screenshot of the result

Upvotes: 2

Jamshaid
Jamshaid

Reputation: 44

Hi Please take a look at code snippet may be it help you

p {
  color: blue;
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.3);
  -webkit-text-stroke: 2px black;
   text-shadow: 15px 15px 2px rgba(0,0,0,0.9); 
}
    
<p>Some Text</p>

Upvotes: 0

Yerke
Yerke

Reputation: 2215

You change the shadow property. Instead of using text-shadow, try:

filter: drop-shadow(15px 15px black);

Upvotes: 0

yanca
yanca

Reputation: 93

You can use the code like below:

p {
color: black;
background: -webkit-linear-gradient(#1de268, #4662FF);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:#FF8802;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
text-shadow: 0px -8px 2px rgba(0,0,0,0.25);
}

Upvotes: 1

Alireza Fereydoni
Alireza Fereydoni

Reputation: 7

Yes dear, you can give negative value to your shadow. for example = text-shadow : -3px -5px black;

Upvotes: 0

Related Questions