Change the color of an image in css using a «grayscale» filter

How to change the color of an image to black and white using CSS?

CSS (Cascading Style Sheets) is a powerful language used to control the visual presentation of web pages. One of the most important things that we can do with CSS is change the color of an image to black and white on the webpage.

Changing the color of an image to black and white using CSS is a simple process that can be done using a few different methods. In this article, we will learn three different methods for converting an image to black and white using CSS.

• Method 1 − Using the «grayscale» filter
• Method 2 − Using the «brightness» and «saturate» filters
• Method 3 − Using the «hue-rotate» filter

Method 1: Using the «grayscale» filter

«grayscale» filter is a most basic and common way to change the color of an image to black and white using the CSS. This filter takes a value between 0% and 100%, with 0% indicating that the image should be in full color and 100% indicating that the image should be fully black and white. This filter can be applied to an image by adding the following CSS code to the image’s CSS class.

Syntax

Example

Here is an example to change the color of an image in css using a «grayscale» filter.

   body < text-align:center; >.img 
Original Image
  
after using "grayscale" filter
 
    

Method 2: Using the «brightness» and «saturate» filters

By Using CSS, the «brightness» and «saturate» filters is a second method for converting an image to black and white. The «brightness» filter to be used to adjust the overall brightness of an image, while the «saturate» filter is used to adjust the saturation of an image.

Syntax

Example

Here is an example to change the color of an image in css using a «brightness» and «saturate» filters.

   body < text-align:center; >.img 
Welcome to Tutorialspoint
 
Original Image
  
after using "brightness" and "saturate" filters
 
    

Method 3: Using the «hue-rotate» filter

The «hue-rotate» filter is used to rotate the hue of an image, which can be used to convert the image to black and white.

Syntax

Example

Here is an example to change the color of an image in css using a «hue-rotate» filter.

   body < text-align:center; >.img 
Welcome to Tutorialspoint
 
Original Image
  
after using "hue-rotate" filters
 
    

Conclusion

Converting an image to black and white using CSS is a simple process that can be done using a few different techniques. The «grayscale» filter, «brightness» and «saturate» filters, and the «hue-rotate» filter are all effective methods for completing this result.

Источник

How TO — Black and White Images

Learn how to create a «black and white» image with CSS.

Black and White Image

Use the CSS filter property to convert an image to black and white.

Grayscale Example

Change the color of all images to black and white (100% gray):

Go to our CSS Images Tutorial to learn more about how to style images.

Go to our CSS filter Property to learn more about CSS filters.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Turn an Image Black and White with CSS

CSS has come a long way over the last few years. In today’s post we’ll take a look at how we can add a black and white filter to our user interface.

The CSS filter property allows you to apply many graphical effects to your HTML markup including images, divs, and other elements. The grayscale() filter allows you to convert an image to various shades of gray, including black and white.

Using the Grayscale CSS Filter

To use the grayscale filter, you call the function as a property value to your filter property like so:

The above CSS will make all images on your page black and white. You can fine tune the percentage from 0% to 100%. Additionally, you can use an integer value from 0 to 1 to denote the percentage as well. The following example show how to do just that.

Additionally, if you omit any value in the grayscale() filter the result will be equivalent to setting it to 1 or 100%.

img  filter: grayscale(); /* Same as grayscale(1) */ > 

Pretty easy right? You can apply this filter both to images and other elements on your page such as div’s, SVGs, and so on.

CSS Black and White Image Example

Let’s see this filter in action. We’ll use an image from Unsplash by Jeryy Zhang .

Grayscale(1) a.k.a black and white

Our code will look like this:

.black-and-white  filter: grayscale(); /* Same as grayscale(1) */ > 

Grayscale(50%) a.k.a half black and white

Our code will look like this:

.grayscale-50  filter: grayscale(50%); > 

CSS Black and White HTML Example

Next, let’s do the same but this time with an html element. Let’s create a box and give it the color magenta. The code will look like this:

.box  height: 75px; width: 100px; padding: 25px; text-align: center; background: magenta; color: white; > 

Now, if we add any of the above classes like grayscale-50 or black-and-white we’ll see the changes applied just like they were to the image.

Black and white

div class="box black-and-white">Hello!div> 

Grayscale-50

div class="box grayscale-50">Hello!div> 

Pretty cool right? The grayscale() filter works in most modern browsers and is a great way to add the black and white effect to your user interface.

Read Next

Latest From YouTube

Источник

How to Create a Black and White Image Using CSS

You could have 2 versions of the image, one color and one b/w, combine them as one image with each version side by side, and offset the images when the mouse hovers over it, using the a CSS sprites technique. http://www.alistapart.com/articles/sprites Solution 3: An option is to use SVG filters: https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css IE has a built in filter you can use (see answers on link). Grayscale Example Change the color of all images to black and white (100% gray): img < -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); >

How TO — Black and White Images

Learn how to create a «black and white» image with CSS.

Black and White Image

Use the CSS filter property to convert an Image to Black and White.

Grayscale Example

Change the color of all images to black and white (100% gray):

Go to our CSS Images Tutorial to learn more about how to style images.

Go to our CSS filter Property to learn more about CSS filters.

How To Create Black and White image with CSS, Learn How To Create a Black and White image with CSS | Make Gray Image Using CSS | Black and White Image Hover Effect on HTML CSS Website ️ SUBSCRIBE: …

How to Change Image Color into White using CSS (EASY)

This video is going to show you How to Change Image Color into White using CSS easily. This css filter technique can also turn an image into black .Subscribe

How To Create Black and White image with CSS

Learn How To Create a Black and White image with CSS | Make Gray Image Using CSS | Black and White Image Hover Effect on HTML CSS Website ️ SUBSCRIBE: …

How to Create a Black and White Image Using CSS

By specifying grayscale value to the filter property of CSS we can create a black and white image. filter property can be used to apply special effects like blur, drop-shadow to images.

Syntax

The syntax of CSS filter Property is as follows −

Example

The following examples illustrate CSS filter property.

    img < margin: 2%; border-radius: 25%; >img:nth-of-type(even)      

This gives the following output

Example

    img < margin: 2%; >img:nth-of-type(odd)      

This gives the following output

How to Create a Black and White Image Using CSS, CSS Web Development Front End Technology By specifying grayscale value to the filter property of CSS we can create a black and white image. filter …

How to make background image black and white?

Are there any filters that would make background image black and white?

I have an image set as the background image using CSS, but now I need to apply a filter so that an image is shown in black and white only. Ideally, I would also like to apply opacity to it.

The effect I really trying to achieve is to have background image black/white and on hover over that span element the filter would be removed, revealing the color version.

And of course it has to work in Firefox, Chrome and Internet Explorer.

This question is missing a more current answer.

The answer is yes, now this is possible and it is well supported amongst modern browsers (though ironically not IE10+ without JavaScript). You are looking at the filter CSS property (which does a lot of other cool stuff besides black and white).

A blog post here goes into more details:

As well as this question here on Stack Exchange which is getting some love and worth a follow by the OP:

And finally, an actual piece of code, shamelessly robbed from the Stack Exchange answer and tested in Chrome and IE9:

For CSS only, I don’t think you could achieve the rollover effect with any type of a filter. You could have 2 versions of the image, one color and one b/w, combine them as one image with each version side by side, and offset the images when the mouse hovers over it, using the a CSS sprites technique. http://www.alistapart.com/articles/sprites

An option is to use SVG filters: https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

IE has a built in filter you can use (see answers on link).

I don’t think CSS was ever really intended for fancy graphical ‘filters’ though opacity seems to be a useful exception. Just swap the background image

Black and white text based on background image with css, I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side …

CSS: how to turn an colour image to a grey or black/white image [duplicate]

How can I turn an colour image to a grey or black/White Image like this website with CSS?

Can it be done solely on CSS or do I need JavaScript (jQuery)?

Thanks for the answers guys. I notice that the trick is to make two different colour images — one is full colour and the other is b/w. I was hoping this can be done in one single image. So there is no way to do that isn’t apart from the ‘trick’??

To make it look really sweet id use jQuery and fade between the two check out this tutorial by Soh Tanaka. (I looks like this site did a variation of this tutorial.)

You can however do this with just css by creating an image sprite and changing the background position on :hover

You can also try this jquery plugin greyScale

The effect can be done with one single image.

EDIT : I recommend also this Black and white jQuery plug in by Gianluca Guarini : This is easier to modify css.

In my answer, I’m addressing only the image creation .

In your case, you’d be better manually pre-rendering the desaturated images using Photoshop (etc).

If you don’t want to manually pre-render the desaturated images, I’d recommend using PHP (or whatever server-side language you have) to do it.

If that’s not an option, you can use JavaScript to make desaturated images, see:

You can do it using canvas: http://spyrestudios.com/html5-canvas-image-effects-black-white/

In IE you’ll need something like explorercanvas: http://excanvas.sourceforge.net/

Html — Set entire page to black and White, I don’t think there’s a way to do this. The closest effect that I could achieve without the entire image becoming black was -webkit-filter: … Code sample