How to "wash out" colors with CSS filters?-CodePudding

I am trying to use CSS filters to create a "disabled" look for components I am working on. I am trying to make it so that everything is "washed out" a bit. I can create this effect by using opacity(0.75) for components which are on white background: then black becomes gray and all strong colors become a bit more white. But the issue is if the component is not on white background, then opacity does not work as I would like. So how could I use CSS filters to create this "wash out" look? Like to multiply with white color a bit all colors.

I tried contrast but it looks like everything goes to gray, not white (so black stays black much longer than with opacity, while other colors are already washed out).

CodePudding user response：

Using a combination of Contrast and Brightness filters might give you what you need:

filter: contrast(30%) brightness(150%);

CodePudding user response：

Isn't simply

#result{
   -webkit-filter: grayscale(50%);
   -moz-filter: grayscale(50%);
   filter: grayscale(50%);
   opacity: 70%;
}

what you are looking for?