-1

I'm interested in the following CSS filters:

blur
brightness
contrast
grayscale
hue-rotate
invert
opacity
saturate
sepia

What are the default values for each (preferably as a % value, where appropriate)? thx

The MDN docs don't cover this!

OPTIONAL READING: Only for those who want context

In Angular, I am applying some filters like so:

<div [ngStyle]="{ filter:
  'brightness(' + filters.brightness + '%) ' +
  'contrast(' + filters.contrast + '%) ' +
  'grayscale(' + filters.grayscale + '%) ' +
  'saturate(' + filters.saturate + '%) ' +
  'sepia(' + filters.sepia + '%) ' +
  'hue-rotate(' + filters['hue-rotate'] + 'deg) ' +
  'invert(' + filters.invert + '%)'
}">
  <span>herro</hello>
</div>

As such, I need to set a default value for each in the controller, which I want to be the "usual" default values - but I don't know what those values are!

danday74
  • 52,471
  • 49
  • 232
  • 283
  • The default values aren't necessarily consistent across all browsers and platforms. For this reason, many developers have come up with (or use someone else's) "CSS Reset" style sheet that they can rely on. See [this](https://en.wikipedia.org/wiki/Reset_style_sheet) – John Wu Aug 23 '23 at 00:21
  • Beware for your "use case", the order in which each of these filters is applied does matter, you won't have the same result in applying these in different orders, each applies over the result of the previous ones, so applying a "default" value to all in a certain order like you do is probably not what you want. https://jsfiddle.net/6sx8ruov/ (I guess you wanted to allow setting all these filters on their own) – Kaiido Aug 23 '23 at 00:58
  • take a look this [SO](https://stackoverflow.com/questions/66016717/image-change-greyscale-slider-in-angular/66017046#66017046) – Eliseo Aug 23 '23 at 06:12

1 Answers1

1

The specification covers this but you can have them as percentage only when the filter accept number or percentage

for blur

The initial value for interpolation is 0px.

for brightness

The initial value for interpolation is 1.

and so on...

Temani Afif
  • 245,468
  • 26
  • 309
  • 415