CSS Filter Property - Lena Design

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:

CSS Fliter Grayscale — *grayscale(100%) CSS Filter

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>

CSS Fliters Brightness — *brightness(200%) CSS Filter

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>

CSS Filters - Contrast — *contrast(200%) CSS Filter

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>

CSS Filters drop-shadow — *drop-shadow(4px 4px 5px gray) CSS Filter

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 hue-rotate — *hue-rotate(90deg) CSS Filter

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>

CSS filters Invert — *invert(100%) CSS Filter

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>

CSS filters -Opacity — *opacity(25%) CSS Filter

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>

CSS Filters - Saturate — *saturate(7) CSS Filter

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>

CSS Filter -Sepia — *sepia(100%) CSS Filter

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>

CSS Multiple Filters — *brightness(110%) drop-shadow(5px 5px 1px rgba(0,0,0,0.5)) CSS Filters

Enjoy coding!

Share this: