Learn CSS filter property.

1. CSS filter: blur(px)

→ Applies a Gaussian Blur Effect to the image.

→ A larger value will create more blur.

→ If no value is specified, 0 is used.

2. CSS filter: brightness(%)

→ Adjusts the brightness of the image.

→ 0% will make the image completely black.

→ Values over 100% will provide brighter results.

3. CSS filter: contrast(%)

→ Adjust the contrast of the image.

→ 0% will make the image completely black.

→ Over 100% will provide results with more contrast.

4. CSS filter: grayscale(%)

→ Converts the image to grayscale.

→ 0% is the default and represents the original image.

→ Note: Negative values are not allowed.

5. CSS filter: hue-rotate(deg)

→ Applies a hue rotation on the image.

→ 0deg is default and represents the original image.

→ Note: Maximum value is 360deg.

6. CSS filter: invert(%)

→ Inverts the samples in the image.

→ 0% is the default and represents the original image.

→ Note: Negative values are not allowed.

7. CSS filter: opacity(%)

→ Sets the opacity level for the image.

→ 0% is 0% is completely transparent.

→ 100% (1) is default.

8. CSS filter: saturate(%)

→ Saturates the image.

→ 0% will make the image completely un-saturated.

→ Values over 100% provide super-saturated results.

9. CSS filter: sepia(%)

→ Converts the image to sepia.

→ 0% is the default and represents the original image.

→ 100% will make the image completely sepia.

CSS box-shadow vs. drop-shadow

--> "box-shadow" applies a shadow to the entire box of an element, even if it has transparent parts or rounded corners.

CSS box-shadow takes four or five values: offset-x, offset-y, blur-radius, spread-radius (optional), and color.

--> "drop-shadow" applies a shadow only to the visible outline of an element, ignoring the transparency and the box model.

CSS drop-shadow takes four values: offset-x, offset-y, blur-radius(optional), and color(optional).

Note: "drop-shadow" is a CSS function, not a property.

And lastly, thank you @elonmusk for the demonstration, the man is a legend and a true polymath🫡