0

I have text in a div tag. This text has a gradient applied to it. It also needs a drop shadow. When I add the drop shadow it covers the gradient. Needs to look like the attached photo. Below is what I have attempted and this code does not create a drop shadow. I followed other post on here. If I add text-shadow: 10px 10px 11px rgb(0, 0, 0); to the #temp tag the drop shadow is on top of the gradient.

enter image description here

#temp {
font-size: 320px;
position: absolute;
font-family: 'pacificoregular';
text-transform: uppercase;
letter-spacing: 20px;
margin-top: -130px;
margin-left: 410px;
text-align: left;

background-image: linear-gradient(165deg, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 40%, rgba(225,133,0,1) 50%, rgba(225,133,0,1) 50%, rgb(143, 83, 0) 75%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:rgba(225,133,0,1);

transform: rotate(-10deg);

} 
#temp:after {

    text-shadow: 10px 10px 11px rgb(0, 0, 0);
    color: transparent;
}
Jeb Donaldson
  • 23
  • 3
  • 1
    This is a duplicate for: [how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient](https://stackoverflow.com/questions/3802218/how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient). Although old... i think its exactly what you need. – d3bgger Jun 04 '20 at 22:12
  • This does not work in my case. #temp is dynamic and always changing values. Seems like I just have to duplicate my div text and apply another style with a shadow and lower z-index. – Jeb Donaldson Jun 05 '20 at 13:42

0 Answers0