css filter Property

filter Property

The filter property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

filter Values

/* <filter-function> values */
filter: blur(5px); /* Gaussian blur */
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

• blur() applies a Gaussian blur to the input image.

filter: blur(5px);

• brightness() applies a linear multiplier to the input image to adjust its brightness. A 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% will provide brighter results.

filter: brightness(2);

• contrast() adjusts the contrast of the input image.

• drop-shadow() applies a drop shadow effect to the input image using the <shadow> parameter.

• grayscale() converts the image to grayscale. A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged.

• hue-rotate() applies a hue rotation.

filter: hue-rotate(90deg);

• invert() inverts the samples in the input image.

• opacity() applies transparency.

• saturate() saturates the input image.

• sepia() converts the input image to sepia.

AI Translation | AI 翻译

This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.


本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。