Image filter effects with CSS (blur, grayscale, sepia etc.)

0 / 0 10 Mins Admin

December 30, 2022

10 Comments

This article will go over some image filter effects with CSS. Some of the most commonly used CSS image effects to help you create a one-of-a-kind visual experience for your users. You’ll learn how to apply effects and animation to photos using CSS techniques with the following examples:

Create Blur Images
Grayscale
Sepia
Invert
Brightness of image
Contrast
hue-rotate
Opacity
saturate

In this article, we will use the image below to demonstrate various image effects and animations.

The CSS filter property

This is a popular way to add effects to images or any HTML element. It enables us to use a variety of functions to apply graphical effects to an element, such as blur, saturation, or colour shift.

This section will show you how to use CSS to create the grayscale() function effect and the filter blur() function effect.

Image Grayscale Effect

The grayscale() converts an image to grayscale by taking as input a number (percentage) that determines the intensity of the conversion.

A value of 100% produces a completely grayscale (black and white) image, whereas a value of 0% has no effect on the image colours.

The CSS example below demonstrates how to apply the grayscale() filter to an image.

.grayscale-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Image filter effects with CSS grayscale function

CSS sepia() Function

A sepia filter creates a type of monochrome image in which the image appears in reddish-brown shades. Similar to grayscale(), but with a reddish-brown colour tone.

Sepia filters are designed to make black-and-white photos look more appealing than the basic grayscale version. Sepia can, however, be applied to colour photos and other images as needed.

An argument must be passed to the CSS sepia() function. This argument determines how much saturation is applied to the image. The argument can either be a percentage or a number.

.sepia-image {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

Image Blur Effect with CSS

Depending on your preference, the blur() function’s unit can be px (pixels), rem (relative to the root font size of the HTML document), em (relative to the font size of the parent element), or percentage (%).

The CSS for the blurred image effect is provided below.

.blur-image {
  -webkit-filter: blur(3px); 
  filter: blur(3px);
}

Image invert with CSS, using invert() Function

The CSS invert() function is a built-in function that is used to apply a filter to an image to set the inversion of the sample image’s colour.

This function takes a single parameter which contains the amount of conversion. Invert’s value is specified in terms of both value and percentage. The value 0% denotes the original image, while 100% denotes the inverted image.

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

The brightness of an image

In CSS, use the filter brightness(percentage) to control image brightness. Remember that the value 0% makes the image black, while the value 100% is for the original image and the default. Rest, you can set any value you want, but values greater than 100% will make the image brighter.

.bright-image {
  -webkit-filter: brightness(190%);
   filter: brightness(190%);
}

The contrast of an image

CSS contrast is set using the filter contrast(percentage) function. The value 0% makes the image darker, while 100% is the original or default image. You can enter any value you want. Values greater than 100% would result in a more contrasty image.

.contrast-image {
  -webkit-filter: contrast(200%);
   filter: contrast(200%);
}

The hue-rotate property

Choosing a hue is as simple as selecting a location on the colour wheel. For example, red is 0 degrees, blue is 240 degrees, and so on.

You’re rotating around this colour circle when you use hue-rotate(angle) to rotate the hue. As can be seen, red is at 0 degrees on the colour circle. If you have a red image and rotate it 240 degrees, that part of the image will turn blue.

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

CSS Opacity, Image filter effects

The CSS opacity() function is combined with the filter property to add transparency to image samples.

An argument must be passed to the opacity() function. This argument determines how much transparency is applied to the image. The argument can either be a percentage or a number.

A value of 100% produces an image that is completely opaque (that is, it remains unchanged). A value of 0% produces an image that is completely transparent (that is, you cannot see it). Values ranging from 0% to 100% are linear multipliers of the effect.

The specification allows for amounts greater than 100%, but this has no effect on the image.

A number value of 0.5 is equivalent to a percentage value of 50%. A value of one equals 100%.

.opacity-image {  
   -webkit-filter: opacity(50%);
   filter: opacity(50%);
}

CSS filter effects: saturate() Function

To adjust the saturation levels in an image, use the CSS saturate() function in conjunction with the filter property.

An argument must be passed to the saturate() function. This argument determines how much saturation is applied to the image. The argument can either be a percentage or a number.

A value of 100% produces an image that remains unchanged. A value of 0% produces a completely desaturated image.

A saturation value greater than 100% will produce a super-saturated image.