SVG filter not showing up in Firefox, working fine in Chrome

For me, it was that I had a display:none on the parent <svg> tag which I think causes Firefox to completely ignore the filter tags inside. So changing <svg style="display:none"> to <svg style="position:absolute; height:0"> did the trick.

There's an input called coloredOut but no output called coloredOut so the filter chain fails. Removing the in="coloredOut" attribute seems to fix that. You might want to raise a Chrome bug that it's not enforcing valid filter chains.

In addition the SVG pushes the text down so you can't see it in the codepen. Adding width="0" height="0" to the <svg> element fixes that issue.

The answer by @RobertLongson is excellent and provides part of the solution. In the codepen I provided, everything works when I implement his fix. However, my own code still did not work properly.

The crucial thing is that in the real code, my CSS was in an external file. It turns out that Firefox (correctly!) interprets my selector in filter: url(#my-drop-shadow) as referring to the CSS file, and not to the HTML document to which the CSS is linked. When I specify it as a URL + selector, as in filter: url(../../index.html#my-drop-shadow), everything works fine. (Alternatively, I could have put the filter in a <style></style> element in the same HTML document.)

---

Source (why Firefox is correct); from CSS 2.1 spec:

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.