CSS Filters

Filters

Filters are the very powerful tool, which are use to defines various visual effects, like blur or color shifting on an HTML elements. Filters are besically used to adjust the rendering of an image, a background, or a border before these element is displayed. There are various filters method or function available, which are given below-

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url()

										    
											.my-filter {
												filter: <filter-function> | none
											}
											
										

										    
											.img {
												filter: grayscale(10%);
											}
											
										

To use multiple filters together, separate each filter function with a space.

										    
											.img {
												filter: contrast(170%) brightness(120%);
											}