grayscale() CSS Function

Description

The CSS grayscale() function converts an image to grayscale. It takes a single parameter, amount, which specifies the amount of grayscale to apply. The value of amount can be a number or a percentage, with 0% representing the original image and 100% representing a completely grayscale image. Values between 0% and 100% produce linear multipliers on the effect.

The grayscale() function can be used to create a variety of effects, such as:

• Making an image appear black and white
• Creating a vintage or retro look
• Adding emphasis to a particular element of an image
• Subtly desaturating an image to make it more harmonious with its surroundings

To use the grayscale() function, simply add it to the filter property of the element you want to apply the effect to. For example, the following CSS code would convert the image with the ID my-image to grayscale:

#my-image {
  filter: grayscale(100%);
}

You can also combine the grayscale() function with other filter functions to create more complex effects. For example, the following CSS code would convert the image with the ID my-image to grayscale and then add a slight blur:

#my-image {
  filter: grayscale(100%) blur(1px);
}

The grayscale() function is supported by all major browsers, including Chrome, Firefox, Edge, and Safari.

Syntax

grayscale() = grayscale( <number-percentage>? )

Values

• number-percentagespecified as a <number> or a <percentage>. A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

Example

<img class="grayscale" src="images/nature.jpg" alt="Grayscale Example">

<img class="grayscale1" src="images/nature.jpg" alt="Grayscale Example">

.grayscale {

   filter: grayscale(1);

}

.grayscale1 {

   filter: grayscale(50%);

}

Browser Support

The following table will show you the current browser support for the CSS grayscale() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023