Blures the element. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.
Adjusts the brightness of the inputA value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values over 100% are allowed, providing brighter results. If the parameter is missing, a value of 1 (100%) is used.
Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the parameter is missing, it defaults to 100% and the image is not changed.
Converts the input image to grayscale. The value is also a percentage or a decimal number equivalent to that percentage. However, the percentage values need be between 0 and 100%. Any value greater than 100% will be clamped to 100%. 0% leaves the image unchanged while 100% makes it completely grey. The higher you go from zero to 100% the more the image loses its colours and becomes grey. If the parameter is missing, a value of 0 is used.
hue-rotate() function selects each color of the input image, rotates it by the angle value passed to it, and then outputs the image with the input colors replaced with new colors. All the colors in the image are shifted in the same way to produce new colors. A value of zero renders the image unchanged. The maximum angle of rotation is 360 degrees. If the value for the angle is not provided, it defaults to the value 0 deg and the image is not changed.
Inverts the samples in the input image. A value of 100% is completely inverted (the image looks like a photo negative). A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the parameter is missing, a value of 0 is used.
The opacity() function is similar in functionality to the CSS opacity property. % may be used.
The saturate() function saturates the colours of the image making it look more vivid. It takes a value between zero and 100% or the value’s equivalent decimal number. A value of 100% leaves the image’s colours unchanged. The value of zero completely desaturates the image while a higher value saturates the image more, and values greater than 100% will super-saturate the image. Negative values are also not allowed.
Sepia gives a vintage appearance to an image. The sepia() function gets its name from the fact that it adjusts an image by giving it a sepia tinge like in old photographs. it takes a value (percentage or decimal) between 0 and 100%. The higher you go from zero the stronger the sepia effect. Values greater than 100% will be clamped to 100%.
drop-shadow applies shadow by picture form and not as rectangular box shadow.