There is a very simple method of applying the grayscale effect to an image. Using the filter() property, we can apply grayscale effect to any HTML element. When we apply a colored box-shadow to an image having a grayscale property, the shadow turns grayscale too. For example:
You can observe that in the CSS, the shadow is defined for the green color, but it appears grayscale.
This can be prevented by wrapping the image and applying shadow properties to the wrapper division. For example:
Output: Now,It can be observed that the shadow is colored, while the image is still grayscale.
You can create some more interesting CSS effects using a combination of these three properties (grayscale(), box-shadow, border). Some examples are shown below:
Example 1: You can transform button #1 into button #2 on hovering with the mouse pointer, using the code below.
Example 2: You can also transform PNG images into distinguished buttons using these effects. These effects are predominately used to create a 3D perspective and minimal view.
- Convert an image into grayscale image using HTML/CSS
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- Why Transition properties does not work with display properties ?
- CSS | grayscale() Function
- How to Create a GrayScale Effect using CSS ?
- How to apply border inside a table ?
- Drop shadow for PNG image using CSS
- How to style icon color, size, and shadow by using CSS ?
- Create a Glowing text shadow using HTML and CSS
- Materialize CSS - Pulse and Shadow
- What is shadow root and how to use it ?
- How to add shadow to a canvas circle using Fabric.js ?
- CSS | Shadow Effect
- CSS | box-shadow Property
- CSS | text-shadow Property
- How to add a box-shadow on one side of an element using CSS?
- How to do box shadow with progress bar style using bootstrap?
- CSS | drop-shadow() Function
- Fabric.js | Text shadow Property
- Fabric.js | Ellipse shadow Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.