Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
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.
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
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
Here we have simply added an image using the <img> tag.
CSS
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.
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.
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.
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.
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.
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%.
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.
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.
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.
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.
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
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
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.
-webkit-box-reflect: below;
}
Output
The image has been reflected below.
Right
Let’s explore the “right” value of the box-reflect property.
-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.
