CSS filter

The CSS filter property allows you to apply graphical effects like blur, grayscale, brightness, contrast, and more to elements. This property is commonly used to enhance images or create visual effects on websites.

The syntax for the filter property is:


.element {
  filter: effect(value);
}

Here, effect is the specific visual effect you want to apply, and value is the intensity or custom value for that effect. Let's take a look at some common filter effects and how to use them.

1. Grayscale

The grayscale filter converts an element to grayscale. The value of this filter ranges from 0 to 100%, where 0% means no grayscale and 100% means complete grayscale.

Result:
example image

2. Blur

The blur filter applies a blur effect to an element. The value of this filter represents the amount of blur to apply, with 0 being no blur.

Result:
example image

3. Brightness

The brightness filter adjusts the brightness of an element. Values greater than 100% increase brightness, while values less than 100% decrease brightness.

Result:
example image

4. Contrast

The contrast filter adjusts the contrast of an element. Similar to brightness, values higher than 100% increase contrast, while values lower than 100% decrease contrast.

Result:
example image

These are just a few examples of the CSS filter property. Experiment with different values and effects to achieve the desired visual outcome on your website!