CSS Filters

Filters give us the ability to manipulate elements.

Change the opacity or brightness, among other things, as you can with Photoshop or other picture editing tools.

The filter property is used. This property can be used on any thing, and here's an example of how it's used on an image:

img {
  filter: <something>;
}

Here you can use a number of values:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• sepia()
• saturate()
• url()

Since each option needs a parameter, note the parentheses after each option.

Consider the following scenario:

img {
  filter: opacity(0.5);
}

Since opacity() takes a single value from 0 to 1, or a percentage, the picture will be 50% transparent.

You can also use several filters at the same time:

img {
  filter: opacity(0.5) blur(2px);
}

Output:

Let's take a closer look at each filter.

blur()

Blurs the content of an element. You send it a value in pixels, ems, or rems that will be used to measure the blur radius.

Consider the following scenario:

img {
  filter: blur(4px);
}

Output:

opacity()

opacity() calculates the picture transparency based on a single value between 0 and 1, or a percentage.

The number 0 (or 0%) signifies full transparency. The number one, or 100 percent, or higher, shows that everything is fully clear.

Consider the following scenario:

img {
  filter: opacity(0.5);
}

Output:

The opacity property in CSS is also useful. However, depending on the implementation, the filter may be hardware accelerated, so this should be the preferred process.

drop-shadow()

drop-shadow() creates a shadow that follows the alpha channel behind the product. If you have a transparent image, the shadow will be added to the image form rather than the image box. The shadow would be added to the entire picture box if the image does not have an alpha channel.

It accepts a minimum of two parameters and a maximum of five:

• The horizontal offset is set by offset-x. It's possible to be cynical.
• The vertical offset is set by offset-y. It's possible to be cynical.
• The blur-radius option regulates the shadow's blur radius. It's set to 0 by default, which means there's no blur.
• The spread radius is controlled by the spread-radius option. The color of the shadow is set in px, rem, or em color, which is optional.

The color can be changed without affecting the spread or blur radius. CSS considers the value as a color rather than a length value.

Consider the following scenario:

img {
  filter: drop-shadow(10px 10px 5px orange);
}
img {
  filter: drop-shadow(10px 10px orange);
}
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

grayscale() adds a gray color to the product.

You transfer one value between 0 and 1, or 0% to 100%, where 1 and 100% mean fully gray, and 0 or 0% means the picture is unaltered and the original colors are retained.

Consider the following scenario:

img {
  filter: grayscale(50%);
}

Output:

sepia()

sepia() applies a sepia color to the element.

You specify a value ranging from 0 to 1, or 0% to 100%, where 100% means the image is fully sepia, and 0 or 0% means the image is unaltered and the original colors are preserved.

Consider the following scenario:

img {
  filter: sepia(50%);
}

Output:

invert()

invert() is a function that inverts the colors of an element. Looking up the opposite of a color in the HSL color wheel is known as inverting a color. If you're not sure what a color wheel is, just Google "color wheel." The opposite of yellow, for example, is blue, and the opposite of red is cyan. Each color has a polar opposite.

The sum of inversion is determined by passing a number ranging from 0 to 1 or 0% to 100%. Total inversion is 1 or 100 percent, while no inversion is 0 or 0%.

Since you always end up in the center of the wheel, 0.5 or 50% will always make a 50% gray color.

Consider the following scenario:

img {
  filter: invert(100%);
}

Output:

hue-rotate()

The HSL color wheel uses degrees to reflect color. You can rotate the color using hue-rotate() in either a positive or negative direction.

A deg value is agreed by the function.

Consider the following scenario:

img {
  filter: hue-rotate(90deg);
}

Output:

brightness()

The brightness of an element can be modified with brightness().

A complete black variable has a value of 0 or 0%. The picture is unchanged if the percentage is set to 1 or 100 percent.

Higher values, such as 1 or 100 percent, brighten the image until it reaches a complete white feature.

Consider the following scenario:

img {
  filter: brightness(50%);
}

Output:

contrast()

contrast() shifts an element's contrast.

A complete gray variable has a value of 0 or 0%. The picture is unchanged if the percentage is set to 1 or 100 percent.

More comparison is accomplished by using values greater than 1 or 100 percent.

Consider the following scenario:

img {
  filter: contrast(150%);
}

Output:

saturate()

saturate() changes an element's saturation.

A complete grayscale variable has a value of 0 or 0%. (with less saturation). The picture is unchanged if the percentage is set to 1 or 100 percent.

Saturation is increased when the value is greater than 1 or 100 percent.

Consider the following scenario:

img {
  filter: saturate(50%);
}

Output:

url ()

A filter specified in an SVG file can be applied with this filter. You specify the location of the SVG file.

Consider the following scenario:

img {
  filter: url(filter.svg);
}