CODEWITHSUNDEEP
css
MalinV
MalinV

Reputation: 31

Why does this gradient text with shadow work in Firefox but not Chrome?

I feel like I've missed something stupid obvious, but maybe someone can help me out.

I've been trying to recreate a gradient text style with two text-shadows that was originally designed in Photoshop, and, in Firefox, I seem to have achieved my goal. But the second I open it in Chrome? The gradient disappears.

What am I doing wrong? 

.field {
  font-size: 25px;
  background: -moz-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(90deg, #e90e94 0%, #800851 100%); /* IE10+ */
  background: linear-gradient(90deg, #e90e94 0%, #800851 100%); /* W3C */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  font-family: Arial Black;
  font-weight: 400;
  height: 50px;
  position: absolute;
  text-transform: lowercase;
  width: 180px;
}

.field:after {
  background: none;
  content: attr(data-text);
  left: 0;
  position: relative;
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}
<span class="field" data-text="bad karma"></span>

EDIT Since this is a problem with the vendor prefix, is there a way to achieve this same result that is actually cross-browser compatible?

Upvotes: 3

Views: 212

Answers (1)

ZeWebDev
ZeWebDev

Reputation: 204

The problem is that the :after doesnt have any background. In chrome at least for now it needs to have the background its going to clip

.field:after {
  background: inherit; /* update this */
  content: attr(data-text);
  left: 0;
  position: relative;
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}

Problem is that in chrome the text shadows will appear over the text because text "isnt really there"

Also it all works fine if its done in the element itself and not in :after so unless you really need it to be like that consider just making an actual element with those that css.

Edit

Another solution is to add the text to both the data-text and inside the span, and make the :after absolutely positioned

<span class="field" data-text="bad karma">bad karma</span>

And

.field:after {
  background: none;
  content: attr(data-text);
  left: 0;
  position: absolute; /* change this */
  text-shadow: 2px 1px 0 rgb(255, 255, 255), 3px 2px 2px rgba(85, 85, 85, 0.7);
  z-index: -1;
}

Upvotes: 1

Related Questions