Trace Baxter Trace Baxter - 3 years ago 41
CSS Question

CSS Linear Gradient Showing wrong word

My website is and I have a linear gradient mimicking the titles acting as text shadow. Every time I first load the page,all the gradients are using the last title and I have to reload the page for it to be right. What is causing this.

h2,h2:after {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
.content {
margin-left: 20%;
.header {
text-decoration: none;
color: black;

h2 {
display: inline-block;
color: #4d4235;
font-family: 'Righteous', serif;
font-size: 6em;
text-shadow: .03em .03em 0 gray;
width: 100%;
h2:after {
content: attr(data-shadow);
position: absolute;
z-index: -1;
top: .06em; left: .06em;
text-shadow: none;
-webkit-linear-gradient(left top, transparent 0%, transparent 25%, #555 25%, #555 50%, transparent 50%, transparent 75%, #555 75%);
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: shad-anim 12s linear infinite;
@keyframes shad-anim {
0% {background-position: 0 0}
0% {background-position: 100% -100%}

<h2 id="about" class="dashed-shadow" data-shadow="About">About</h2>

Answer Source

Are you sure this is not a browser-specific issue? This code appears to work as advertised to me, generating an animated text-shadow.

Note that 'webkit-' properties are non-standard. You could use the standards-compliant equivalents:

color instead of webkit-fill-color

Add background-clip same as the webkit-background-clip

Note also that background-clip: text and webkit-fill-color are currently not supported by the last version of the two microsoft browsers: IE or Edge. You may need to provide a fallback. It still looks okay because the second text is generated as a shadow, if a little dark.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download