html

How to Add Filters and Reflections to Images in CSS?

Appearance of a website is highly crucial if you intend to attract more and more audiences to your website. Therefore, to enhance the overall look of a website addition of graphical effects to images or reflecting images is greatly recommended. CSS provides various properties that let you fulfill these tasks with ease. We have discussed these properties in detail in this write-up. In this post, we have discussed the following.

  1. Image filters in CSS
  2. Image reflections in CSS

Image Filters in CSS

For the purpose of adding various special effects to an image such as opacity, blurriness, saturation, etc, the CSS filter property is used.

Syntax

filter: value;

The different methods that are associated with the filter property are explained below.

Value Description
none This value adds no effect and is a default value.
blur It adds blurriness to the image and renders value in pixels.
brightness It is used to increase or decrease the brightness of an image and exhibit values in percentage.
contrast This value tunes the contrast of an image and values are defined in percentage.
grayscale It transforms an image into a grayscale image and also exhibits values in percentage.
hue-rotate This value is used to rotate an image and renders values in degrees.
invert It inverts the samples that exist in the image and values are defined in percentage.
opacity This value adjusts the transparency of an image and takes values from 0 to 1.
saturate It saturates an image by taking values in percentage.
sepia This value is used to convert an image to sepia and exhibit values in percentage.
drop-shadow It is used to apply a shadow effect on the image.
url() It is a function that requires the location of an XML document containing an SVG filter and might render a link to a particular filter element.
initial This value gives the property its initial value.
inherit This value inherits the filter property from the ancestor element.

Now that you know all the values that a filter property can exhibit, below we have demonstrated these values for a better understanding.

First and foremost, let’s add an image to our web page using basic HTML.

HTML

<img src="car.jpg" alt="Car">

Here we have simply added an image using the <img> tag.

CSS

img {
  width: 30%;
  height: auto;
}

Now we are using basic CSS to give some width and height to the image.

Output


The image has been added to the web page.

Now let’s apply filters to this image and explore the various values that the filter property can exhibit.

Blur

We have set the blur effect to 2px. The more value of the blur method will increase the blurriness.

.blur {
    filter: blur(2px);
}

Output


This is a blurred image.

Brightness

The brightness of the picture has been set to 0.50. A reduction in the value will result in a drop in the brightness and vice versa.

.brightness {
    filter: brightness(0.50);
}

Output


Brightness of the image has been adjusted successfully.

Contrast

We have set the contrast of the image to 160%. If you want to increase the contrast then increase the value as much as you desire.

.contrast {
    filter: contrast(160%);
}

Output


A contrast effect added with great ease.

Grayscale

Let’s give the grayscale() method some value and see the changes in the image.

.grayscale {
    filter: grayscale(100%);
}

Output


A colored image was converted to a black and white image using the grayscale() method of the filter property.

Hue-rotate

We are assigning the hue-rotate() method 270 degrees. This method basically modifies the images by rotating image around the color circle.

.hue-rotate {
    filter: hue-rotate(270deg);
}

Output


This is an image with hue-rotation of 270 degrees.

Invert

The invert value adds some special effect to the image by inverting it. Here we are inverting the image 80%.

.invert {
    filter: invert(80%);
}

Output


The samples of the image have been inverted.

Opacity

To make an image transparent opacity value is used. Below we are adjusting the opacity of the image to 0.4. The less the value of opacity, the more the image will become transparent.

.opacity {
    filter: opacity(0.4);
}

Output


This is an image with 40% transparency.

Saturate

To add saturation, the saturate() method of filter property is used. The more the value, the more will be the saturation of the image.

.saturate {
    filter: saturate(4);
}

Output


Saturation effect was successfully added to the image.

Sepia

For the purpose of adding a sepia effect to the image, give it some value like we have assigned it 50% in the below code snippet.

.sepia {
    filter: sepia(50%);
}

Output


The sepia effect is working properly.

Drop-shadow

To add a shadow we are using the drop-shadow method. The length of the shadow has been assigned to each side of the image.

.shadow {
    filter: drop-shadow(8px 8px 10px red);
}

Output


The drop-shadow effect was successfully added.

Now that we have learned about the filter property in-depth, let’s move forward and see what reflect property is.

Image Reflections in CSS

For the purpose of reflecting images, the CSS box-reflect property is used.

Syntax

-webkit-box-reflect: below | above | right | left;

For this property to fully function on various browsers it is used with a prefix “-webkit-”.

Note: the firefox browser does not support the box-reflect property.

Below we have demonstrated some of these values with the help of relevant examples so that you can grab the concept of image reflection.

Let’s first add an image to our web page.

HTML

<img src="pisa.jpg" alt="Pisa Tower" width="200px" height="200px;">

Here we have added an image and given it some width and height.

Output

An image was inserted in the web page.

Below

Simply assign the box-reflect property “below” value to reflect an image below the original image.

img {
  -webkit-box-reflect: below;
}

Output


The image has been reflected below.

Right

Let’s explore the “right” value of the box-reflect property.

img {
  -webkit-box-reflect: right;
}

Output


The image was successfully reflected to the right.

Conclusion

For the purpose of adding special effects to the images appearing on websites the CSS filter property is used. Various methods that this property can exhibit are; grayscale(), saturate(), opacity(), blur(), brightness(), hue-rotate(), etc. Besides adding special effects you can also reflect images using the CSS box-reflect property to either right, left, above, or below. This post covers all the depths of adding filters or reflections to images with the help of relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.