March 1Mar 1 Administrators CSS Image Filter Effects CSS Filters The CSS filter property is used to add visual effects (like blur and saturation) to elements. Within the filter property, you can use the following CSS functions: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() The CSS blur() Function The blur() filter function applies a blur effect to an element. A larger value will create more blur. If no value is specified, 0 is used (no effect). Example Apply different blur effects to <img> elements: #img1 { filter: blur(2px);}#img2 { filter: blur(6px);} Try it Yourself » The CSS brightness() Function The brightness() filter function adjusts the brightness of an element. 100% is default, and represents the original brightness Values over 100% will provide brighter results Values under 100% will provide darker results 0% will make the image completely black Example Make an image brighter and darker than the original: #img1 { filter: brightness(150%);}#img2 { filter: brightness(50%);} Try it Yourself » The CSS contrast() Function The contrast() filter function adjusts the contrast of an element. 100% is default, and represents the original contrast Values over 100% increases the contrast Values under 100% decreases the contrast 0% will make the image completely gray Example Increase and decrease the contrast for an image: #img1 { filter: contrast(150%);}#img2 { filter: contrast(50%);} Try it Yourself » The CSS drop-shadow() Function The drop-shadow() filter function applies a drop-shadow effect to an image. Example Add different drop-shadow effects to an image: #img1 { filter: drop-shadow(8px 8px 10px gray);}#img2 { filter: drop-shadow(10px 10px 7px lightblue);} Try it Yourself » The CSS grayscale() Function The grayscale() filter function converts an image to grayscale. 100% (or 1) will make the image completely grayscale 0% (or 0) will have no effect Example Set various grayscale for an image: #img1 { filter: grayscale(1);}#img2 { filter: grayscale(60%);}#img3 { filter: grayscale(0.4);} Try it Yourself » The CSS hue-rotate() Function The hue-rotate() filter function applies a color rotation to an element. This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image. Example Set various color rotations for an image: #img1 { filter: hue-rotate(200deg);}#img2 { filter: hue-rotate(90deg);}#img3 { filter: hue-rotate(-90deg); } Try it Yourself » The CSS invert() Function The invert() filter function inverts the color of an image. 100% (or 1) will fully invert the colors 0% (or 0) will have no effect Example Invert the colors of an image: #img1 { filter: invert(0.3);}#img2 { filter: invert(70%);}#img3 { filter: invert(100%);} Try it Yourself » The CSS opacity() Function The opacity() filter function applies an opacity effect to an element. 100% (or 1) will have no effect 50% (or 0.5) will make the element 50% transparent 0% (or 0) will make the element completely transparent Example Set various opacity for an image: #img1 { filter: opacity(80%);}#img2 { filter: opacity(50%);}#img3 { filter: opacity(0.2);} Try it Yourself » The CSS saturate() Function The saturate() filter function adjusts the saturation (color intensity) of an element. 100% (or 1) will have no effect 0% (or 0) will make the element completely unsaturated 200% (or 2) will make the element super saturated Example Set various saturations for an image: #img1 { filter: saturate(0);}#img2 { filter: saturate(100%);}#img3 { filter: saturate(200%);} Try it Yourself » The CSS sepia() Function The sepia() filter function converts an image to a sepia tone (a warmer, more brown/yellow color). 0% (or 0) will have no effect 100% (or 1) applies full sepia effect Example Set various sepia for an image: #img1 { filter: sepia(1);}#img2 { filter: sepia(60%); } #img3 { filter: sepia(0.4);} Try it Yourself » CSS Filter Functions The following table lists the CSS filter functions: Function Description blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element contrast() Adjusts the contrast of an element drop-shadow() Applies a drop-shadow effect to an image grayscale() Converts an image to grayscale hue-rotate() Applies a color rotation to an element invert() Inverts the color of an image opacity() Applies an opacity effect to an element saturate() Adjusts the saturation (color intensity) of an element sepia() Converts an image to sepia ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.