css filter

CSS Filter

filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|
url();

How filters work?

  1. Blur
  2. Brightness
  3. Contrast
  4. Drop-shadow
  5. Grayscale
  6. Hue-rotate
  7. Invert
  8. Opacity
  9. Saturate
  10. Sepia

1. Blur

blur(radius)
filter: blur(5px);

2. Brightness

brightness(amount)
brightness(1)    /* No effect */
brightness(150%) /* brightness will be high by 50% */
brightness(0%) /* Completely black */

3. Contrast

contrast(amount)
filter: contrast(1); // no change
filter: contrast(115%) // contrast will be high 15%
filter: contrast(0); // completely gray

4. Drop-shadow

drop-shadow(offset-x offset-y blur-radius spread-radius color)
filter: drop-shadow(12px 12px 5px #1c8c9e);

5. Grayscale

grayscale(amount)
grayscale(0)     /* No effect */
grayscale(1) /* Completely grayscale */
grayscale(100%) /* Completely grayscale */

6. Hue-rotate

hue-rotate(angle)
filter: hue-rotate(0deg)    /* No effect */
filter: hue-rotate(.5turn) /* 180deg rotation */
filter: hue-rotate(405deg) /* Same as 45deg rotation */
filter: hue-rotate(-90deg); /* Same as 270deg rotation */

7. Invert

invert(amount)
filter: invert(0)     /* No effect */
filter: invert(100%) /* Completely inverted */

8. Opacity

opacity(amount)
filter: opacity(0%)   /* Completely transparent */
filter: opacity(1) /* No effect */
filter: opacity(30%); /* 30% transparent */

9. Saturate

saturate(amount)
filter: saturate(0)     /* Completely unsaturated */
filter: saturate(100%) /* No effect */
filter: saturate(200%) /* Double saturation */

10. Sepia

sepia(amount)
sepia(0)     /* No effect */
sepia(.95) /* 95% sepia */
sepia(100%) /* Completely sepia */
filter: sepia(70%);

Multiple Property:

filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%)
hue-rotate(30deg);

Performance considerations

Reference:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store