Sometimes you don’t need to use the graphic programs to edit your images, you can do some editing work with CSS by applying CSS filters.

The CSS filter property defines visual effects (like brightness, blur or opacity) to an HTML element.
Demo:
CSS Syntax:
filter: grayscale() | blur() | brightness() | contrast() | drop-shadow() | hue-rotate() | invert() | opacity() | saturate() | sepia() | none;
Note: The filters that use percentage values (i.e. 50%) and also decimal (i.e. 0.5).
filter: grayscale( )
Change the image/ HTML element to black and white(100%):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: grayscale(100%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>
Output:

filter: blur( )
Apply a blur effect to the image/ HTML element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: blur(2px);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: brightness( )
Adjust the brightness of the image/ HTML element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: brightness(200%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: contrast( )
Adjust the contrast of the image/ HTML element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: contrast(200%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: drop-shadow( )
Apply a drop shadow effect to the image/ HTML element (the filter is similar to CSS box-shadow property:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: drop-shadow(4px 4px 5px gray);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: hue-rotate( )
The hue-rotate( )function applies a hue rotation on the input image:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: hue-rotate(90deg);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: invert( )
Invert the samples in the image/ HTML element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: invert(100%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: opacity( )
Set the opacity level for the image/ HTML element (this filter is similar to the CSS opacity property):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: opacity(25%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: saturate( )
Saturate the image/ HTML element:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: saturate(7);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

filter: sepia( )
Convert the image/ HTML element to sepia:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: sepia(100%);
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

Using Multiple Filters
To use multiple filters, separate each filter with a space. Notice that the order is important.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
img {
filter: brightness(110%) drop-shadow(5px 5px 1px rgba(0,0,0,0.5));
}
</style>
<body>
<img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320" alt="girl" width="300" height="300">
</body>
</html>

Enjoy coding!
Read also:
CSS background-blend-mode Property