EN
CSS - grayscale filter
0 points
In this article, we would like to show you how to use the grayscale filter in CSS.
Quick solution:
xxxxxxxxxx1
.grayscale {2
filter: grayscale(100%);3
}4
5
.half-grayscale {6
filter: grayscale(0.5);7
}
In this example, we present how to use the grayscale filter with percentage and fractional values.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
display: flex;8
}9
10
img {11
height: 100px;12
margin: 5px;13
}14
15
.grayscale {16
filter: grayscale(100%); /* <----- grayscale 100% */17
}18
19
.half-grayscale {20
filter: grayscale(0.5); /* <----- grayscale 50% */21
}22
23
</style>24
</head>25
<body>26
<img class="grayscale" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />27
<img class="half-grayscale" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />28
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />29
</body>30
</html>Result:
