Brightness Filter in Firefox and Opera Without Svg File

Brightness filter in firefox and opera without svg file

You want to use an SVG filter. An example of a filter that will darken your image by a fixed amount in each channel is:

<filter id="darken">
<feComponentTransfer>
       <feFuncR type="linear" intercept="-0.2" slope="1"/>
       <feFuncG type="linear" intercept="-0.2" slope="1"/>
       <feFuncB type="linear" intercept="-0.2" slope="1"/>
   </feComponentTransfer>
</filter>

This will darken your image by 20% in each color channel. Full jsfiddle

CSS3 filter doesn't work on Opera,Internet Explorer,Mozilla Firefox

Mozilla Firefox: support without prefix is coming in Firefox 34 according to MDN (stable version currently at 32). For a few weeks, you'll need the SVG filter via url() if I understood well.

Note: if you support Firefox ESR - Extended Support Release - that may be deployed by quite a few IT departments and organizations, Fx 24 ESR won't be supported after october 2014 but Fx 31 ESR will be till mid or end 2015 I guess. (source)

Changing brightness filter

Is the filter property for CSS3 just not functional in firefox (or any other browsers)?

Here is the answer from MDN:

This is an experimental technology

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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.

-webkit-filter: brightness() value different for safari? How to work around?

This was a bug that has been fixed. It's just a matter of waiting for Safari to catch up with Chrome, which will probably have happened by the time you read this.

Darkening an image with CSS (In any shape)

You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.

CSS:

.tinted { opacity: 0.8; }

If you're interested in better browser compatability, I suggest reading this:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

If you're determined enough you can get this working as far back as IE7 (who knew!)

Note: As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.

How to Decrease Image Brightness in CSS

The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:

#myimage {
    filter: brightness(50%);
}

You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

An another: http://davidwalsh.name/css-filters

And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.

Finally you can check the browser support of filter here.

---

Related Topics