blur()

Gives the element a blurred appearance. The blurring intensity will be determined by the value starting at 0 and ending in infinity.

How does it work? The blur() funtion in reality applies a gaussian blur to the input element. And the value tha you can manipulate is the ‘radius’ of how many pixels on the screen blend into each other. Hence a larger value will create deeper blur. The parameter does not accept percentage values though.

.blurred {
  filter: blur(3px);
}

brightness()

Modifies the element’s brightness. The amount can be expressed as a decimal or as a percentage, both positive and negative. Default value is 100% or 1. 0% or 0 represent no brightness, hence a black surface. In theory ending value goes into infinity, though going that way, your element will become white sooner or later. Important note, brightness increase/decrease is linear.

.brightness {
  filter: brightness(0.4);
}

contrast()

Modifies the element’s contrast. The amount can be expressed as a decimal or as a percentage.

A value of 0% or 0 will render the element as completely without contrast. A value of 100% or 1 leaves the element as it is. Ending value goes into infinity ramping up the contrast.

.contrast {
  filter: contrast(125%);
}

grayscale()

Changes the element’s color to a scale of gray. The amount of grayscale is represented by the value, in percentages.

Values operate in-between 0% and 100%, where s value of 0% leaves the input unchanged, and a value of 100% is completely grayscaled.

.grayscaled {
  filter: grayescale(50%);
}

hue-rotate()

Changes the element’s hue. The number specifies the rotation’s angle in degrees.

A value of 0deg will render the element unchanged. A value of 180deg goes to the opposite hue. Ending value is 360deg which in reality is equal to 0deg.

.hue {
  filter: hue-rotate(180deg);
}

invert()

Inverts the element’s colors. The value is a percentage that indicates linearly how much inversion has been applied.

A value of 0% leaves the input unchanged. A value of 100% is completely inverted. Negative value is not allowed.

.inverted {
  filter: invert(100%);
}

opacity()

Changes the element’s opacity. The value can be between 0 and 1, where 1 is fully opaque. Value can be presented in percentege, and none of the values can be negative.

.opacity {
  filter: opacity(0.75);
}

saturate()

Adjusts the saturation of the element. The value can be a percentage or a decimal number.

The value defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Ending value goes to infinity. Negative values are not allowed.

.saturated {
  filter: saturate(110%);
}

sepia()

Applies a sepia tone to the element. The value is a percentage representing the amount of sepia tone.

A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values cannot be negative.

.old-fashioned {
  filter: sepia(25%);
}

drop-shadow()

Applies a drop shadow effect to the element.

The value specifies the horizontal offset, vertical offset, blur radius, and optional color of the shadow.

.with-shadow {
  filter: drop-shadow(0px 8px 16px #000000);
  filter: drop-shadow(0px 8px black); /* no blur radius applied */
}

Filter to Color Generator

In my endeavors, I encountred more then once a problem with no possibility of modifing elements color due to lack of a workable declaration in CSS like color, background-color nor fill.

This is the anwser — a tool that through filter property changes your base black color into any desired color:
Filter to Color Generator