Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Decrease Image Brightness in CSS

How to Decrease Image Brightness in CSS


I want to decrease image Brightness in CSS ... I searched alot but all I get is to change the opacity ... and that's make the image more brightness ... can any one help me ?

Problem courtesy of: Shadi


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:

An another:

And most importantly, the W3C specs:

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.

Hope that helps.

Solution courtesy of: Spudley


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to Decrease Image Brightness in CSS


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription