CSS 'text-shadow' is not working in Firefox

Question

I am attempting to add the text-shadow property to a CSS style sheet, and it does work for Internet Explorer, Chrome, Opera, and Safari, but I cannot get it to show up in Firefox, even if I use -moz-text-shadow property.

I am running version 43.0.4. Is this is a known problem and is there is a hack? Below is the CSS that controls the h1 to which I am trying to apply a text-shadow.

/* =Headings
-------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: 700;
    line-height: 1.0em;
    word-wrap: break-word;
}

h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 2.625em; /* = 42px */
     -moz-text-shadow: 0 0 3px 2px #000;
    text-shadow: 0 0 3px 2px #000;
}

h2 {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    font-size: 2.250em; /* = 36px */
}

h3 {
    margin-top: 0.857em;
    margin-bottom: 0.857em;
    font-size: 1.875em; /* = 30px */
}

h4 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.500em; /* = 24px */
}

h5 {
    margin-top: 1.125em;
    margin-bottom: 1.125em;
    font-size: 1.125em; /* = 18px */
}

h6 {
    margin-top: 1.285em;
    margin-bottom: 1.285em;
    font-size: 1.000em; /* = 16px */
}

There are no additional styles controlling the h1 presentation. — Matthew Croft, Feb 02 '16 at 02:21
Your code is incorrect and shouldn't work in any browser. `text-shadow` takes a [maximum of 4 values](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) (offset-x, offset-y, blur-radius, and color) but you are entering 5 (like if it was a `box-shadow`). If you remove the last value before the color, it will work fine. — Alvaro Montoro, Feb 02 '16 at 02:25
Thank you very much. That worked once I removed the extra parameter! — Matthew Croft, Feb 02 '16 at 02:29

score 2 · Answer 1 · answered Feb 02 '16 at 02:27

The text-shadow CSS property is defined like this:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

So you have:

text-shadow: 0 0 3px 2px #000;

Which will have:

h-shadow: 0
v-shadow: 0
blur-radius: 3px
color: 2px!!!

So just try to remove the 2px value and everything will be ok.

score 1 · Answer 2 · answered Feb 02 '16 at 02:27

Your code is incorrect and shouldn't work in any browser. text-shadow takes a maximum of 4 values (offset-x, offset-y, blur-radius, and color) but you are entering 5 (like if it was a box-shadow that allows 5). If you remove the last value before the color, it will work fine:

h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 2.625em; /* = 42px */
     -moz-text-shadow: 0 0 3px #000;
    text-shadow: 0 0 3px #000;
}

CSS 'text-shadow' is not working in Firefox

2 Answers2