Filter in CSS | All CSS Filters
CSS filters are a powerful way to apply visual effects to HTML elements. Here’s a breakdown of all the CSS filter functions available:
1. Blur
Syntax: filter: blur(px);
Meaning: Applies a Gaussian blur to the element. The value specifies the radius of the blur effect.
2. Brightness
Syntax: filter: brightness(%)
Meaning: Adjusts the brightness of the element. Values over 100% make the element brighter, while values under 100% darken it.
3. Contrast
Syntax: filter: contrast(%)
Meaning: Adjusts the contrast of the element. Values over 100% increase contrast, while values under 100% decrease it.
4. Drop-shadow
Syntax: filter: drop-shadow(offsetX offsetY blurRadius color);
Meaning: Applies a shadow effect similar to box-shadow, but it's a filter effect, allowing it to be more versatile with transparency and blending.
5. Grayscale
Syntax: filter: grayscale(%)
Meaning: Converts the element to grayscale. A value of 100% makes the element completely grayscale, while 0% leaves it unchanged.
6. Hue-rotate
Syntax: filter: hue-rotate(deg);
Meaning: Rotates the hue of the element's colors. The value is specified in degrees, from 0 to 360.
7. Invert
Syntax: filter: invert(%)
Meaning: Inverts the colors of the element. A value of 100% fully inverts the colors, while 0% leaves them unchanged.
8. Opacity
Syntax: filter: opacity(%)
Meaning: Sets the opacity level of the element. Values range from 0% (fully transparent) to 100% (fully opaque).
9. Saturate
Syntax: filter: saturate(%)
Meaning: Adjusts the saturation of the element’s colors. Values over 100% increase saturation, while values under 100% decrease it.
10. Sepia
Syntax: filter: sepia(%)
Meaning: Applies a sepia tone to the element, which makes it look like a photograph from the early 20th century. A value of 100% applies full sepia, while 0% keeps the original colors.
11. Contrast
Syntax: filter: contrast(%)
Meaning: Adjusts the contrast of the element. Values greater than 100% increase contrast, while values less than 100% decrease it.
Please Like share and subscribe to my Youtube channel.
#coding #webdesign #css #webdevelopment #programming #programminglanguage #tamannaah #tamannaahbhatia
Watch video Filter in CSS | All CSS Filters online without registration, duration hours minute second in high quality. This video was added by user CodeChat 30 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 370 once and liked it 17 people.