DEMO | zp25

filter: blur(<length>)

filter: brightness([ <number> | <percentage> ])

filter: contrast([ <number> | <percentage> ])

filter: drop-shadow(<length>{2,3} <color>?)

filter: grayscale([ <number> | <percentage> ])

filter: hue-rotate(<angle>)

filter: invert([ <number> | <percentage> ])

filter: opacity([ <number> | <percentage> ])

filter: saturate([ <number> | <percentage> ])

filter: sepia([ <number> | <percentage> ])

#filter {
  .img {
    width: 95%;
    max-width: torem(400px);
    height: auto;
    margin: torem(10px) 0;
  }

  .blur {
    filter: blur(5px);
  }

  .brightness {
    filter: brightness(0.5);
  }

  .contrast {
    filter: contrast(0.2);
  }

  .drop-shadow {
    filter: drop-shadow(torem(10px) torem(10px) torem(10px) color(gray));
  }

  .grayscale {
    filter: grayscale(100%);
  }

  .hue-rotate {
    filter: hue-rotate(90deg);
  }

  .invert {
    filter: invert(100%);
  }

  .opacity {
    filter: opacity(0.5);
  }

  .saturate {
    filter: saturate(200%);
  }

  .sepia {
    filter: sepia(100%);
  }
}