Created by CyanHall.com on 11/10/2020 , Last updated: 04/30/2021.
👉  github shields Star me if it’s helpful.

1. CSS Filter: brightness

    filter: brightness(0.4);
  
demo image  =>  demo image

2. CSS Filter: grayscale

    filter: grayscale(1);
  
demo image  =>  demo image

3. CSS Filter: opacity

    filter: opacity(0.3);
  
demo image  =>  demo image

4. CSS Filter: blur

    filter: blur(2px);
  
demo image  =>  demo image

5. CSS Filter: invert

    filter: invert(1);
  
demo image  =>  demo image

6. clip-path


Use clippy to generate clip-path
    clip-path: polygon(
  50% 0%, 61% 35%,
  98% 35%, 68% 57%,
  79% 91%, 50% 70%,
  21% 91%, 32% 57%,
  2% 35%, 39% 35%
);
  
demo image  =>  demo image

7. mix-blend-mode


First, create a text above the img
    <div style="position: relative">
  <img src="sample.png"/>
  <span style="
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);">
    LISA
  </span>
</div>
  
demo image  => 
demo image LISA
And, set mix-blend-mode:
    .span {
  mix-blend-mode: screen;
}
  
demo image LISA
 => 
demo image LISA

8. Ink Painting Effect


    .ink-effect {
  background-image: url(/sample.png);
  background-blend-mode: difference;
  background-position: 
    calc(50% - 1px) 
    calc(50% - 1px), 
    calc(50% + 1px) 
    calc(50% + 1px);
  filter: brightness(2) invert(1) grayscale(1);
  box-shadow: inset 0 0 0 1px black;
}
  
demo image  =>  demo image

9. Pencil Painting Effect


    .pencil-effect {
  background-image: url(/sample.png), url(/sample.png);
  background-blend-mode: difference;
  background-position: 
    calc(50% - 1px) 
    calc(50% - 1px), 
    calc(50% + 1px) 
    calc(50% + 1px);
  filter: brightness(2) invert(1) grayscale(1);
  box-shadow: inset 0 0 0 1px black;
}
  
demo image  =>  demo image

10. Colored Pencil Effect


    .colored-pencil-effect {
  position: relative;
  background-image: url(/sample.png);
  box-shadow: inset 0 0 0 1px black;
  background-size: contain;
}
.colored-pencil-effect:before, .colored-pencil-effect:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  box-shadow: inset 0 0 0 1px black;
}
.colored-pencil-effect:before {
  background-image: url(/sample.png), url(/sample.png);
  background-blend-mode: difference;
  background-position:
    calc(50% - 1px) calc(50% - 1px), 
    calc(50% + 1px) calc(50% + 1px);
  filter: brightness(2) invert(1) grayscale(1);
}
.colored-pencil-effect:after {
  background: inherit;
  mix-blend-mode: color;
}
  
demo image  => 
More effect can be found on bennettfeely.com
* Sample Photo from LISA BLACKPINK - ddu-du ddu-du mv


Maitained by Cyanhall.com, Copy Rights @ CC BY-NC-SA 4.0