Thread by @Prathkum

We can create simple photoshop using CSS. Let's see how 😄

🧵👇🏻

CSS filter functions provide us the flexibility of adding graphical effects to an element. They are

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

1. blur

As the term suggests, blur function simply blurs your input image. The blur that is being applied to image is known and Gaussian blur

2. brightness

Brightness function adds some visual perception in the input image, making it appear brighter or darker

3. contrast()

You can adjust the contrast of the input image. Contrast is like the difference in brightness between objects or regions

4. drop-shadow()

box-shadow applies the shadow around rectangular box whereas drop-shadow automatically fits around the shape of an element

5. grayscale()

The grayscale() CSS function converts the input image to grayscale

6. hue-rotate()

Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted

7. invert()

invert function simply invert the color of the element

8. opacity()

Opacity function applies transparency to the samples in the input image

9. saturate()

The CSS saturate function helps to reduce or increase the saturation level of the input image.

10. sepia()

The sepia() CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance.

I created this animation using `hue-rotate()` function only.

Check it out: codepen.io/prathkum/pen/K…

That's pretty much it for this thread. Hope you like it 💖

Peace out 😉