CSS filters default values

74 Views Asked by At

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)?

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!

1

There are 1 best solutions below

0
Temani Afif On BEST ANSWER

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...