cssangularcss-filters

CSS filters default values


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!


Solution

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