CODEWITHSUNDEEP
htmlcsssvg
Daniel Williams
Daniel Williams

Reputation: 665

CSS SVG text-shadow is on top of text

I am simply trying to put a shadow behind some text, but the shadow seems to be displayed on top of the text instead. I'm using Google Chrome. This is an image:

image of shadow inside text

Here it is, rendered in your browser:

#title {
  fill: white;
  color: white;
  display: block;
  margin: auto;
  text-shadow: 10px 10px 3px black;
  font-size: 400%;
  text-align: center;
  font-family: consolas;
  font-weight: bold;
  stroke: #F08000;
  stroke-width: 1px;
}
<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;">
   <text id="title" text-anchor="middle" x="50%" y="20vh">Software</text>
</svg>

Upvotes: 8

Views: 10290

Answers (2)

Max Starkenburg
Max Starkenburg

Reputation: 1539

I believe what's happening is that for some reason the shadow for the stroke is being applied on top of the fill color (I'm not sure why things would be layered like that, but it seems to be the case). A workaround would be to create two <text> elements, one just to make the shadow, and another to go on top of it.

HTML:

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;">
   <text id="titleshadow" text-anchor="middle" x="50%" y="20vh">Software</text>
   <text id="titletop" text-anchor="middle" x="50%" y="20vh">Software</text>
</svg>

CSS:

text {
   display: block;
   margin: auto;
   font-size: 400%;
   text-align: center;
   font-family: consolas;
   font-weight: bold;
}
#titleshadow {
   text-shadow: 10px 10px 3px black;
}
#titletop {  
   stroke: #F08000;
   stroke-width: 1px;
   fill: #fff;
}

Fiddle: https://jsfiddle.net/wquzq9z4/

Upvotes: 3

Hussain Rauf
Hussain Rauf

Reputation: 298

Decrease horizontal and vertical shadows and increase blur radius in text-shadow property:

text-shadow: 6px 6px 10px black;

Here's the working sample: Check Me!

I hope this is what you are looking for.

Upvotes: 5

Related Questions