What's the CSS Filter Alternative for Firefox

Alternative for -webkit-filter in Mozilla Firefox

Just use filter, without the -webkit- prefix. It will work in Firefox 35 and up. If you need support for older Firefox versions, look into SVG filters. MDN has an article entitled Applying SVG effects to HTML content on the issue.

What's the CSS Filter alternative for Firefox?

Please check the Nihilogic Javascript Image Effect Library:

• supports IE and Fx pretty well
• has a lot of effects

You can find many other effects in the CVI Projects:

• they are also JS based
• there's a Lab to experiment

Good Luck

CSS blur filter not working in Firefox and IE 10, any alternatives?

CSS3 filters are not supported in IE10 or Firefox (v.23), and support is unknown for those browsers in the near future.

Have a look: http://caniuse.com/#feat=css-filters

You could use Modernizr to check for CSS filter support and fallback to a background image if not supported.

CSS: Workaround to backdrop-filter?

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

https://web.dev/backdrop-filter/

NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is planning to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

CSS Filter not working in Firefox

GrayScale has limitations to work in firefox using a -moz-filter.

To get it working use the below snippet:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

DEMO

css filter invert() not working on mozilla firefox?

You may want to use a SVG filter. I basically a vector-shape graphic language which uses a XML structure. With this you can not only create vector shapes but also modifie different element.
I'm not sure how a SVG file does generate a specific effect(why it wouldn't support the normal invert(), but this one does support).

The xml file i used for this:

<svg xmlns=\'http://www.w3.org/2000/svg\'>
  <filter id=\'invert\'>
    <feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>
  </filter>
</svg>

The css + xml url i used:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");

I know the color isn't excactly the same as the original one, but it is an alternative.
Note this is just a 'hack' for firefox, you can just use static filters for other browsers.

---

More info about this subject:

Latest version

W3School tutorial

Morzilla explenation

a SVG generator online.

More info about SVG in Internet Explore

---

You can't find all effects in the generator, but i might be usefull to see different structure with different effects. You might want to read some basic understanding of XML first :)

jsFiddle

---

Other topic about this matter: What's the CSS Filter alternative for Firefox?

---

Related Topics