Modern CSS #850：Image Effects

HTML

              
                <header class="header">
  <h1 class="title">Image Effects <span class="tag-line">are implemented by <a href="http://bennettfeely.com/image-effects">@bennettfeely</a></span></h1>        
  <div class="icon-menu">
    <button class="label download-btn fa fa-download js-download" title="Download you pretty photo"></button>
    <button class="label reset-btn   fa fa-trash js-reset" title="Reset"></button>
    <input class="input" type="file" id="imageInput" />
    <label class="fa fa-upload label image-icon" for="imageInput" title="Upload your photo"></label>
    <a class="fa fa-github label image-icon" href="https://github.com/seyedi/image-effects"></a>
  </div>
</header>
<main class="main">
  <div class="effects">
    <figure class="effects__item selected" data-name="none-effect">
      <div class="effects__img none-effect"></div>
      <figcaption class="effects__name">none</figcaption>
    </figure>        
    <figure class="effects__item" data-name="pencil-effect">
      <div class="effects__img pencil-effect"></div>
      <figcaption class="effects__name">pencil</figcaption>
    </figure>
    <figure class="effects__item" data-name="watercolor-effect">
      <div class="effects__img watercolor-effect"></div>
      <figcaption class="effects__name">watercolor</figcaption>
    </figure>
    <figure class="effects__item" data-name="emboss-effect">
      <div class="effects__img emboss-effect"></div>
      <figcaption class="effects__name">emboss</figcaption>
    </figure>
    <figure class="effects__item" data-name="colored-pencil-effect">
      <div class="effects__img colored-pencil-effect"></div>
      <figcaption class="effects__name">colored pencil</figcaption>
    </figure>
    <figure class="effects__item" data-name="chalkboard-effect">
      <div class="effects__img chalkboard-effect"></div>
      <figcaption class="effects__name">chalkboard</figcaption>
    </figure>
    <figure class="effects__item" data-name="colored-chalkboard-effect">
      <div class="effects__img colored-chalkboard-effect"></div>
      <figcaption class="effects__name">colored chalkboard</figcaption>
    </figure>
    <figure class="effects__item" data-name="airbrush-effect">
      <div class="effects__img airbrush-effect"></div>
      <figcaption class="effects__name">airbrush</figcaption>
    </figure>
    <figure class="effects__item" data-name="hallucination-effect">
      <div class="effects__img hallucination-effect"></div>
      <figcaption class="effects__name">hallucination</figcaption>
    </figure>
    <figure class="effects__item" data-name="flannel-effect">
      <div class="effects__img flannel-effect"></div>
      <figcaption class="effects__name">flannel</figcaption>
    </figure>    
    <figure class="effects__item" data-name="low-ink-x-effect">
      <div class="effects__img low-ink-x-effect"></div>
      <figcaption class="effects__name">Low Ink (horizontal)</figcaption>
    </figure>    
    <figure class="effects__item" data-name="low-ink-y-effect">
      <div class="effects__img low-ink-y-effect"></div>
      <figcaption class="effects__name">Low Ink (vertical)</figcaption>
    </figure>    
    <figure class="effects__item" data-name="collage-effect">
      <div class="effects__img collage-effect"></div>
      <figcaption class="effects__name">collage</figcaption>
    </figure>    
    <figure class="effects__item" data-name="mosaic-effect">
      <div class="effects__img mosaic-effect"></div>
      <figcaption class="effects__name">mosaic</figcaption>
    </figure>    
    <figure class="effects__item" data-name="photo-border-effect">
      <div class="effects__img photo-border-effect"></div>
      <figcaption class="effects__name">photo border</figcaption>
    </figure>
    <figure class="effects__item" data-name="infrared-effect">
      <div class="effects__img infrared-effect"></div>
      <figcaption class="effects__name">infrared</figcaption>
    </figure>
    <figure class="effects__item" data-name="night-vision-effect">
      <div class="effects__img night-vision-effect"></div>
      <figcaption class="effects__name">night vision</figcaption>
    </figure>
    <figure class="effects__item" data-name="warhol-effect">
      <div class="effects__img warhol-effect"></div>
      <figcaption class="effects__name">warhol</figcaption>
    </figure>
    <figure class="effects__item" data-name="selective-color-effect">
      <div class="effects__img selective-color-effect"></div>
      <figcaption class="effects__name">selective color</figcaption>
    </figure>
    <figure class="effects__item" data-name="mirror-x-effect">
      <div class="effects__img mirror-x-effect"></div>
      <figcaption class="effects__name">Mirror (horizontal)</figcaption>
    </figure>
    <figure class="effects__item" data-name="mirror-y-effect">
      <div class="effects__img mirror-y-effect"></div>
      <figcaption class="effects__name">Mirror (vertical)</figcaption>
    </figure>
  </div>
  <figure class="preview">
    <div class="photo none-effect">
      <img src="http://tools.css-tricks.ir/image-effects/img/bg.jpg" class="placeholder" alt="">
    </div>          
    <figcaption class="code">

      <menu class="code__menu">
        <button class="code__btn js-css is-selected">CSS</button>
        <button class="code__btn js-scss">SCSS</button>
        <button class="code__btn js-copy" data-clipboard-target=""><i class="fa fa-files-o" aria-hidden="true"></i> <span class="js-copy-text">Copy</span></button>
      </menu>

      <div class="effect-code-wrapper">

        <div class="effect-code" id="none">
        </div>



        <div class="effect-code" id="pencil">
          <pre class="css" id="pencil_css"><code class="language-css">.pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    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;
  }
}
</code></pre>

          <pre class="scss" id="pencil_scss"><code class="language-scss">.pencil-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (background-blend-mode: difference) {
    background-image: $url, $url;
    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;
  }
}</code></pre>  
        </div>

        <div class="effect-code" id="watercolor">
          <pre class="css" id="watercolor_css"><code class="language-css">.watercolor-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    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;
  }
  .watercolor-effect:after {
    background-image: url(photo.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}
</code></pre>




          <pre class="scss" id="watercolor_scss"><code class="language-scss">.watercolor-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
    }

    &:before {
      background-image: $url, $url;
      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;
    }

    &:after {
      background-image: $url;
      background-position: center;
      mix-blend-mode: multiply;
      filter: brightness(1.3) blur(2px) contrast(2);
    }
  }
}</code></pre>
        </div>


        <div class="effect-code" id="emboss">
          <pre class="css" id="emboss_css"><code class="language-css">.emboss-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
  .emboss-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference, screen;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}
</code></pre>




          <pre class="scss" id="emboss_scss"><code class="language-scss">.emboss-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
    background-image: $url, $url, $url;
    background-blend-mode: difference, screen;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px),
      center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="colored-pencil">
          <pre class="css" id="colored-pencil_css"><code class="language-css">.colored-pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .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(photo.jpg), url(photo.jpg);
    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;
  }
}
</code></pre>




          <pre class="scss" id="colored-pencil_scss"><code class="language-scss">.colored-pencil-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (mix-blend-mode: color) {
    position: relative;

    &:before,
    &: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;
    }

    &:before {
      background-image: $url, $url;
      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);
    }

    &:after {
      background: inherit;
      mix-blend-mode: color;
    }
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="chalkboard">
          <pre class="css" id="chalkboard_css"><code class="language-css">.chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
  .chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}
</code></pre>




          <pre class="scss" id="chalkboard_scss"><code class="language-scss">.chalkboard-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: grayscale(1)) and (background-blend-mode: difference) {
    background-image: $url, $url;
    background-blend-mode: difference;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="colored-chalkboard">
          <pre class="css" id="colored-chalkboard_css"><code class="language-css">.colored-chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
  .colored-chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: cover;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}
</code></pre>




          <pre class="scss" id="colored-chalkboard_scss"><code class="language-scss">.colored-chalkboard-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
    background-image: $url, $url, $url;
    background-size: cover;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px),
      center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="airbrush">
          <pre class="css" id="airbrush_css"><code class="language-css">.airbrush-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
    mix-blend-mode: multiply;
  }
}
</code></pre>




          <pre class="scss" id="airbrush_scss"><code class="language-scss">.airbrush-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      mix-blend-mode: multiply;
    }
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="hallucination">
          <pre class="css" id="hallucination_css"><code class="language-css">.hallucination-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (mix-blend-mode: multiply) {
  .hallucination-effect {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;
  }
  .hallucination-effect:before, .hallucination-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    mix-blend-mode: multiply;
    transform: scale(1.05);
  }
  .hallucination-effect:before {
    background-color: yellow;
    background-blend-mode: screen;
    transform-origin: top left;
  }
  .hallucination-effect:after {
    background-color: cyan;
    background-blend-mode: screen;
    transform-origin: bottom right;
  }
}
</code></pre>




          <pre class="scss" id="hallucination_scss"><code class="language-scss">.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      transform: scale(1.05);
    }

    &:before {
      background-color: yellow;
      background-blend-mode: screen;
      transform-origin: top left;
    }

    &:after {
      background-color: cyan;
      background-blend-mode: screen;
      transform-origin: bottom right;
    }
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="flannel">
          <pre class="css" id="flannel_css"><code class="language-css">.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}
</code></pre>




          <pre class="scss" id="flannel_scss"><code class="language-scss">.flannel-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: overlay) {
    background-image: $url, $url, $url;
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="low-ink-x">
          <pre class="css" id="low-ink-x_css"><code class="language-css">.low-ink-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-x-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}
</code></pre>




          <pre class="scss" id="low-ink-x_scss"><code class="language-scss">.low-ink-x-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: screen, overlay) {
    background-image:  $url, $url, $url;
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="low-ink-y">
          <pre class="css" id="low-ink-y_css"><code class="language-css">.low-ink-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-y-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}
</code></pre>




          <pre class="scss" id="low-ink-y_scss"><code class="language-scss">.low-ink-y-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: screen, overlay) {
    background-image:  $url, $url, $url;
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="collage">
          <pre class="css" id="collage_css"><code class="language-css">.collage-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .collage-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}
</code></pre>




          <pre class="scss" id="collage_scss"><code class="language-scss">.collage-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: overlay) {
    background-image: $url, $url, $url, $url, $url, $url;
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="mosaic">
          <pre class="css" id="mosaic_css"><code class="language-css">.mosaic-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}
</code></pre>




          <pre class="scss" id="mosaic_scss"><code class="language-scss">.mosaic-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}</code></pre>  
        </div>


        <div class="effect-code" id="photo-border">
          <pre class="css" id="photo-border_css"><code class="language-css">.photo-border-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}
</code></pre>




          <pre class="scss" id="photo-border_scss"><code class="language-scss">.photo-border-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}</code></pre>  
        </div>


        <div class="effect-code" id="infrared">
          <pre class="css" id="infrared_css"><code class="language-css">.infrared-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}
</code></pre>




          <pre class="scss" id="infrared_scss"><code class="language-scss">.infrared-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}</code></pre>  
        </div>


        <div class="effect-code" id="night-vision">
          <pre class="css" id="night-vision_css"><code class="language-css">.night-vision-effect {
  background-image: url(photo.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
</code></pre>




          <pre class="scss" id="night-vision_scss"><code class="language-scss">.night-vision-effect {
  $url : url(photo.jpg);
  $line-width: 5px;

  background-image:
    $url,
    radial-gradient(
      #0F0,
      #000
    ),
    repeating-linear-gradient(
      transparent 0,
      rgba(0,0,0,0.1) $line-width/2,
      transparent $line-width
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}</code></pre>  
        </div>


        <div class="effect-code" id="warhol">
          <pre class="css" id="warhol_css"><code class="language-css">.warhol-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: color) {
  .warhol-effect {
    background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(photo.jpg);
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}
</code></pre>




          <pre class="scss" id="warhol_scss"><code class="language-scss">.warhol-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: color) {
    background-image:
      linear-gradient(
        #14EBFF 0,
        #14EBFF 50%,
        #FFFF70 50%,
        #FFFF70 100%
      ),
      linear-gradient(
        #FF85DA 0,
        #FF85DA 50%,
        #AAA 50%,
        #AAA 100%
      ),
      $url;
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="selective-color">
          <pre class="css" id="selective-color_css"><code class="language-css">.selective-color-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}
</code></pre>




          <pre class="scss" id="selective-color_scss"><code class="language-scss">.selective-color-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      filter: brightness(3);
    }
  }
}</code></pre>  
        </div>


        <div class="effect-code" id="mirror-x">
          <pre class="css" id="mirror-x_css"><code class="language-css">.mirror-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleX(-1)) {
  .mirror-x-effect {
    position: relative;
  }
  .mirror-x-effect:before, .mirror-x-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
  }
  .mirror-x-effect:before {
    left: 0;
    right: 50%;
    transform: scaleX(-1);
  }
  .mirror-x-effect:after {
    left: 50%;
    right: 0;
  }
}
</code></pre>




          <pre class="scss" id="mirror-x_scss"><code class="language-scss">.mirror-x-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (transform: scaleX(-1)) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      background: inherit;
    }

    &:before {
      left: 0;
      right: 50%;
      transform: scaleX(-1);
    }

    &:after {
      left: 50%;
      right: 0;
    }
  }
}</code></pre>

        </div>


        <div class="effect-code" id="mirror-y">
          <pre class="css" id="mirror-y_css"><code class="language-css">.mirror-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleY(-1)) {
  .mirror-y-effect {
    position: relative;
  }
  .mirror-y-effect:before, .mirror-y-effect:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: inherit;
  }
  .mirror-y-effect:before {
    top: 0;
    bottom: 50%;
    transform: scaleY(-1);
  }
  .mirror-y-effect:after {
    top: 50%;
    bottom: 0;
  }
}
</code></pre>




          <pre class="scss" id="mirror-y_scss"><code class="language-scss">.mirror-y-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (transform: scaleY(-1)) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      background: inherit;
    }

    &:before {
      top: 0;
      bottom: 50%;
      transform: scaleY(-1);
    }

    &:after {
      top: 50%;
      bottom: 0;
    }
  }
}</code></pre>  
        </div>
      </div>


    </figcaption>
  </figure>
</main>    

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idkRes2Y/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200"><path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path></svg>
  </a>
  
</div>

CSS

              
                html {
  box-sizing: border-box;
}

*,*::after,*::before {
  box-sizing: inherit; 
}

body, button, input, textarea, select {
  text-rendering: optimizelegibility;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: cursive;
  background: #1c1e22;  
  min-height: 100vh;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4.2em);  
}

@media (min-width: 40em) {
  .main {      
    min-height: 0;
    height: calc(100vh - 4.2em);  
  }
}

.header {
  display: flex;
  background: linear-gradient(to bottom,#2a3139,#292d34);
  padding: 0 1em;
  overflow: hidden;
  height: 4.2em;
}

.title {
  flex: 1 auto;
  font-size: 1em;
  padding: .5em 0;
  color: #c4ccdf;
  user-select: none;
}

@media (min-width: 40em) {
  .title {
    font-size: 1.1em;
  }
}

.tag-line {
  font-size: .8em;
  font-weight: normal;
  color: #aab2c5;
  display: block;
  white-space: nowrap;
}

@media (min-width: 40em) {
  .tag-line {
    display: inline;
  }
}

.tag-line a {
  text-decoration: none;
  color: inherit;
}

.effects {
  display: flex;
  flex-flow: row nowrap;  
  overflow: auto;
  padding: 1em 0;
  background: #0f1010;  
  flex: 0 0 9em;
}

.effects__item {
  display: flex;
  flex-direction: column;
  flex: 1 0 6.3em;
  margin: 0 .5em;
  border: 1px solid #35373a;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  padding-bottom: 0;
  transition: .3s border;
}

.effects__item.selected ,
.effects__item:hover {
  border-color: #c4ccdf;
}


.effects__img {
  display: block;  
  max-width: 100%;
  height: 4.6em;
  object-fit: cover;
}

.effects__name {
  flex-grow: 1;
  color: #7e8792;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .8em;
  padding: .3em;
  text-transform: capitalize;
  transition: .3s color;
  user-select: none;
}

.effects__item.selected .effects__name,
.effects__item:hover .effects__name {
  color: #c4ccdf;
}

.icon-menu {
  width: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.input {
  position: absolute;
  min-width: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border: 0;
  clip:rect(0 0 0 0);
  overflow: hidden;
}

.label {
  padding: .5em;
  font-size: 1.1em;
  cursor: pointer;
  margin-right: .3em;
  color: #c4ccdf;
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
}

@media (min-width: 40em) {
  .label {
    font-size: 1.4em;
  }
}

.reset-btn,
.download-btn {
  display: none;
}

.preview {
  display: flex;
  margin: 0;
  flex-direction: column;
  flex: 1;
}

@media (min-width: 40em) {
  .preview {  
    flex-direction: row;    
  }
}

.code__menu {
  flex: 0 0 3.23em;
  display: flex;
  margin: 0;
  padding: .3em;
  font-size: smaller;
  text-align: left;
  white-space: nowrap;
}

.code__btn {
  border: none;
  outline: 0;
  display: inline-block;
  flex: 1 0 auto;
  text-align: center;
  padding: 10px 8px;
  background: #403b3a;
  margin: 0 0 0 5px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  cursor: pointer;
  white-space: normal;
  color: #fff;
  text-decoration: none;
  transition: background .4s;   
  user-select: none;
}

.code__btn:hover,
.code__btn.is-selected {
  background: #706c6b;
  transition-duration: .2s;
}

.code {
  position: relative;
  flex: 1 0 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(0, 0%, 8%);
}

.effect-code-wrapper {
  flex: 1 1 calc(100% - 3.23em);
  overflow: auto;
  position: relative;
  z-index: 2;
}

.effect-code {
  padding: 0 1em;
  display: none;
}

.scss {
  display: none;
}

.photo {  
  flex: 0 0 50%;
  margin: 0;
  background-image: url('http://tools.css-tricks.ir/image-effects/img/bg.jpg');
  background-size: cover;
  overflow: hidden;
}

.placeholder {
  max-width: 100%;
  opacity: 0;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: hsla(222, 30%, 82%, 0.28);
}


/* None effect ================================================================== */

.none-effect {
  background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
  background-size: cover;   
  background-position: center;
}

#none {
  display: block;
}

#none::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2em;
  right: 2em;
  text-align: center;
  font-size: 1em;
  color: #fff;
  padding: 2em 4em;
  background-color: #292f37;

  content: 'Choose an effect from above :)';
}

/* Pencil effect ================================================================== */

.pencil-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;   
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (background-blend-mode: difference) {
   .pencil-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-blend-mode: difference;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
      box-shadow: inset 0 0 0 1px black;
   }
}

/* Watercolor effect ============================================================== */
.watercolor-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: blur(2px)) or (filter: blur(2px))) and (mix-blend-mode: multiply) {
   .watercolor-effect {
      position: relative;
      overflow: hidden;
   }

   .watercolor-effect:before, .watercolor-effect:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
   }

   .watercolor-effect:before {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-blend-mode: difference;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
      box-shadow: inset 0 0 0 1px black;
   }

   .watercolor-effect:after {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-position: center;
      mix-blend-mode: multiply;
      -webkit-filter: brightness(1.3) blur(2px) contrast(2);
      filter: brightness(1.3) blur(2px) contrast(2);
   }
}

/* Emboss effect ================================================================== */
.emboss-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (background-blend-mode: difference, screen) {
   .emboss-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-blend-mode: difference, screen;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
   }
}

/* Colored Pencil effect ========================================================== */
.colored-pencil-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (mix-blend-mode: color) {
   .colored-pencil-effect {
      position: relative;
   }

   .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(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-blend-mode: difference;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
   }

   .colored-pencil-effect:after {
      background: inherit;
      mix-blend-mode: color;
   }
}

/* Chalkboard effect ============================================================== */
.chalkboard-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: grayscale(1)) or (filter: grayscale(1))) and (background-blend-mode: difference) {
   .chalkboard-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-blend-mode: difference;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
      -webkit-filter: brightness(1.5) grayscale(1);
      filter: brightness(1.5) grayscale(1);
   }
}

/* Colored chalkboard effect ====================================================== */
.colored-chalkboard-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: brightness(2)) or (filter: brightness(2))) and (background-blend-mode: color, difference) {
   .colored-chalkboard-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-size: cover;
      background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
      background-blend-mode: color, difference;
      -webkit-filter: brightness(2);
      filter: brightness(2);
   }
}

/* Airbrush effect ================================================================ */
.airbrush-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: blur(5px) contrast(5)) or (filter: blur(5px) contrast(5))) and (mix-blend-mode: multiply) {
   .airbrush-effect {
      position: relative;
      overflow: hidden;
   }

   .airbrush-effect:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      -webkit-filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      mix-blend-mode: multiply;
   }
}

/* Hallucination effect =========================================================== */
.hallucination-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (mix-blend-mode: multiply) {
   .hallucination-effect {
      position: relative;
      overflow: hidden;
      background-color: magenta;
      background-blend-mode: screen;
   }

   .hallucination-effect:before, .hallucination-effect:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
   }

   .hallucination-effect:before {
      background-color: yellow;
      background-blend-mode: screen;
      -webkit-transform-origin: top left;
      transform-origin: top left;
   }

   .hallucination-effect:after {
      background-color: cyan;
      background-blend-mode: screen;
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right;
   }
}

/* Flannel effect ================================================================= */
.flannel-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (background-blend-mode: overlay) {
   .flannel-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-position: center;
      background-size: 100%, 100000% 100%, 100% 100000%;
      background-blend-mode: overlay;
   }
}

/* Low ink (horizontal) effect ==================================================== */
.low-ink-x-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
   .low-ink-x-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-size: 100% 100%, 10000% 100%;
      background-blend-mode: screen, overlay;
   }
}

/* Low ink (vertical) effect ====================================================== */
.low-ink-y-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
   .low-ink-y-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-size: 100% 100%, 100% 1000%;
      background-blend-mode: screen, overlay;
   }
}

/* Collage effect ================================================================= */
.collage-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (background-blend-mode: overlay) {
   .collage-effect {
      background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-size: 200%, 80%, 60%, 50%, 40%, 100%;
      background-position: 50%, 80%, 30%, 0;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
   }
}

/* Mosaic effect ================================================================== */
.mosaic-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover, 5% 5%;
   background-position: center;
   background-blend-mode: overlay;
}

/* Photo border effect ============================================================ */
.photo-border-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-position: center;
   background-size: 60%, 20%;
   background-repeat: no-repeat, repeat;
}

/* Infrared effect ================================================================ */
.infrared-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
   -webkit-filter: hue-rotate(180deg) saturate(2);
   filter: hue-rotate(180deg) saturate(2);
}

/* Night vision effect ============================================================ */
.night-vision-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
   background-size: cover;
   background-position: center;
   background-blend-mode: overlay;
}

/* Warhol effect ================================================================== */
.warhol-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (background-blend-mode: color) {
   .warhol-effect {
      background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
      background-size: 50% 100%, 50% 100%, 50% 50%;
      background-position: top left, top right;
      background-repeat: no-repeat, no-repeat, repeat;
      background-blend-mode: color;
   }
}

/* Selective color effect ========================================================= */
.selective-color-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: brightness(3)) or (filter: brightness(3))) and (mix-blend-mode: color) {
   .selective-color-effect {
      position: relative;
   }

   .selective-color-effect:before, .selective-color-effect:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      -webkit-filter: brightness(3);
      filter: brightness(3);
   }
}

/* Horizontal mirror effect ======================================================= */
.mirror-x-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (transform: scaleX(-1)) {
   .mirror-x-effect {
      position: relative;
   }

   .mirror-x-effect:before, .mirror-x-effect:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      background: inherit;
   }

   .mirror-x-effect:before {
      left: 0;
      right: 50%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
   }

   .mirror-x-effect:after {
      left: 50%;
      right: 0;
   }
}

/* Vertical mirror effect ========================================================= */
.mirror-y-effect {
   background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
   background-size: cover;
   background-position: center;
}

@supports (transform: scaleY(-1)) {
   .mirror-y-effect {
      position: relative;
   }

   .mirror-y-effect:before, .mirror-y-effect:after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      background: inherit;
   }

   .mirror-y-effect:before {
      top: 0;
      bottom: 50%;
      -webkit-transform: scaleY(-1);
      transform: scaleY(-1);
   }

   .mirror-y-effect:after {
      top: 50%;
      bottom: 0;
   }
}
/**
 * Code style
 */

pre[class*="language-"] {
  padding: 0;
  box-shadow: none;
  border: 0;
  overflow: visible;
  font-size: .9em;
}

pre::selection,
code::selection,
code span::selection {
  background: #E91E63 !important; 
  color: #FFF !important;
}

.token.punctuation {
  opacity: 1;
}

.tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: .5rem;
    display: grid;
    place-content: center;
    transition: all .28s linear;
    
    &:hover {
      background:#4161b2;
    }
    
    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }

JS

              
                (function($) {

  var $image = $('#imageInput'),
      $reset = $('.js-reset'),
      $download = $('.js-download'),
      $photo = $('.photo'),
      $placeholder = $('.placeholder'),
      $effectCode = $('.effect-code'),
      $effect = $('.effects__item'),
      $effectImg = $('.effects__img'),
      $codeBtn = $('.code__btn'),
      $copy = $('.js-copy'),
      $css = $('.js-css'),
      $scss = $('.js-scss'),
      $copyText = $('.js-copy-text'),
      currentEffect = null,
      imageData = 'http://tools.css-tricks.ir/image-effects/img/bg.jpg';
      imageWidth = null;
      imageHeight = null;

  var sheet = (function() {
    var style = document.createElement("style");

    // WebKit hack :(
    style.appendChild(document.createTextNode(""));

    document.head.appendChild(style);

    return style.sheet;
  })();      

  var cleanRules = function() {
    var i = sheet.cssRules.length - 1 ;

    while(i >= 0){
      
      if("deleteRule" in sheet) { sheet.deleteRule(i); }
      else if("removeRule" in sheet) { sheet.removeRule(i); }
      
      i--;
      
    }
  }


  var setImageSrc = function(imageData) {
    $placeholder.attr('src', imageData);
    imageWidth = $placeholder.get(0).naturalWidth;
    imageHeight = $placeholder.get(0).naturalHeight;
  }

  $image.change(function(){
    var im = document.querySelector("input[type=file]").files[0];
    var file = new FileReader;
    if (im) {
      file.readAsDataURL(im);
    } else {
      alert("pick a photo");
    }

    file.onloadend = function() {
      imageData = file.result;
      cleanRules();
      insertRules(imageData);
      $reset.show();
      $download.show();
      setImageSrc(imageData);
    }

    var insertRules = function(image) {      
      sheet.insertRule('.photo.none-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.none-effect { background-image: url(' + image + ') !important}', 0);
      

      sheet.insertRule('.photo.pencil-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.pencil-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.watercolor-effect { background-image: url(' + image + ')}', 0);
      sheet.insertRule('.effects__img.watercolor-effect { background-image: url(' + image + ')}', 0);
      sheet.insertRule('.photo.watercolor-effect::before { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.watercolor-effect::before { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.photo.watercolor-effect::after { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.watercolor-effect::after { background-image: url(' + image + ') !important}', 0);

      sheet.insertRule('.photo.emboss-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.emboss-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.colored-pencil-effect { background-image: url(' + image + ')}', 0);
      sheet.insertRule('.effects__img.colored-pencil-effect { background-image: url(' + image + ')}', 0);
      sheet.insertRule('.photo.colored-pencil-effect::before { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.colored-pencil-effect::before { background-image: url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.chalkboard-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.chalkboard-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);

      sheet.insertRule('.photo.colored-chalkboard-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.colored-chalkboard-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.airbrush-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.airbrush-effect { background-image: url(' + image + ') !important}', 0);

      sheet.insertRule('.photo.hallucination-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.hallucination-effect { background-image: url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.flannel-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.flannel-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.low-ink-x-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.low-ink-x-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.low-ink-y-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.low-ink-y-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);

  
      sheet.insertRule('.photo.collage-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.collage-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);

      
      sheet.insertRule('.photo.mosaic-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.mosaic-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
       
      sheet.insertRule('.photo.photo-border-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.photo-border-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
 
    
      sheet.insertRule('.photo.infrared-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.infrared-effect { background-image: url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.night-vision-effect { background-image: url(' + image + '), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px) !important}', 0);
      sheet.insertRule('.effects__img.night-vision-effect { background-image: url(' + image + '), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px) !important}', 0);

      sheet.insertRule('.photo.warhol-effect { background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.warhol-effect { background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.selective-color-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.selective-color-effect { background-image: url(' + image + ') !important}', 0);

      
      sheet.insertRule('.photo.mirror-x-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.mirror-x-effect { background-image: url(' + image + ') !important}', 0);


      sheet.insertRule('.photo.mirror-y-effect { background-image: url(' + image + ') !important}', 0);
      sheet.insertRule('.effects__img.mirror-y-effect { background-image: url(' + image + ') !important}', 0);
    }
  });


  $reset.on('click', function(){
    cleanRules();
    $(this).hide();
    $download.hide();
    setImageSrc('http://tools.css-tricks.ir/image-effects/img/bg.jpg');
  });

  $effect.on('click', function(){
    $effect.removeClass('selected');
    $(this).addClass('selected');
    ef = this.getAttribute("data-name");
    currentEffect = ef.replace("-effect", "");
    $effectCode.hide();
    $('#'+currentEffect).show();
    $('#'+currentEffect+' .css').addClass('is-selected');
    $copy.attr( "data-clipboard-target", "#"+currentEffect+"_css" );
    $scss.removeClass('is-selected');
    $css.addClass('is-selected');

    $photo.removeClass();
    $photo.addClass('photo ' + ef);
  });

  $css.on('click', function(e){
    e.preventDefault();
    $codeBtn.removeClass('is-selected');
    $css.addClass('is-selected');
    $('#'+currentEffect+' .scss').hide();
    $('#'+currentEffect+' .scss').removeClass('is-selected');
    $('#'+currentEffect+' .css').show();    
    $('#'+currentEffect+' .css').addClass('is-selected');
    $copy.attr( "data-clipboard-target", "#"+currentEffect+"_css" );
  });

  $scss.on('click', function(e){
    e.preventDefault();
    $codeBtn.removeClass('is-selected');
    $scss.addClass('is-selected');
    $('#'+currentEffect+' .css').hide();
    $('#'+currentEffect+' .css').removeClass('is-selected');
    $('#'+currentEffect+' .scss').show();    
    $('#'+currentEffect+' .scss').addClass('is-selected');
    $copy.attr( "data-clipboard-target", "#"+currentEffect+"_scss" );
  });

  /**
   * Copy to clipboard
   */
  var clipboard = new Clipboard('.js-copy');

  clipboard.on('success', function(e) {
    $copyText.text('Copied!');
    setTimeout(function() {
      $copyText.text('Copy');
      e.clearSelection();
      
    }, 2000)
  });  


  var getEffectStyle = function () {

    switch (currentEffect) {
      case 'pencil': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;position:relative;background-size: cover;background-position: center;background-image: url('+imageData+'), url('+imageData+');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;}';
      break;

      case 'watercolor': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;position: relative;overflow: hidden;background-image:url('+imageData+');background-size:cover;background-position:center}.final:after,.final:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover}.final:before{background-image:url('+imageData+'),url('+imageData+');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 #000}.final:after{background-image:url('+imageData+');background-position:center;mix-blend-mode:multiply;filter:brightness(1.3) blur(2px) contrast(2);}';
      break;

      case 'emboss': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-size: cover;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-blend-mode: difference, screen;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;filter: brightness(2) invert(1) grayscale(1);}';
      break;

      case 'colored-pencil': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final: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;}.final:before {background-image: url('+imageData+'), url('+imageData+');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);}.final:after {background: inherit;mix-blend-mode: color;}';
      break;

      case 'chalkboard': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-size: cover;background-image: url('+imageData+'), url('+imageData+');background-blend-mode: difference;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);filter: brightness(1.5) grayscale(1);}';
      break;

      case 'colored-chalkboard': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: cover;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;background-blend-mode: color, difference;filter: brightness(2);}';
      break;     

      case 'airbrush': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;overflow: hidden;}.final:after {display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: inherit;filter: brightness(1.5) saturate(100) blur(5px) contrast(5);mix-blend-mode: multiply;}';
      break;     

      case 'hallucination': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;overflow: hidden;background-color: magenta;background-blend-mode: screen;}.final:before, .final:after {display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: inherit;mix-blend-mode: multiply;transform: scale(1.05);}.final:before {background-color: yellow;background-blend-mode: screen;transform-origin: top left;}.final:after {background-color: cyan;background-blend-mode: screen;transform-origin: bottom right;}';
      break;     

      case 'flannel': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-position: center;background-size: 100%, 100000% 100%, 100% 100000%;background-blend-mode: overlay;}';
      break;     

      case 'low-ink-x': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 100% 100%, 10000% 100%;background-blend-mode: screen, overlay;}';
      break;     

      case 'low-ink-y': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 100% 100%, 100% 1000%;background-blend-mode: screen, overlay;}';
      break;     

      case 'collage': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 200%, 80%, 60%, 50%, 40%, 100%;background-position: 50%, 80%, 30%, 0;background-blend-mode: overlay;background-repeat: no-repeat;}';
      break;     

      case 'mosaic': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+');background-size: cover, 5% 5%;background-position: center;background-blend-mode: overlay;}';
      break;     

      case 'photo-border': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+');background-position: center;background-size: 60%, 20%;background-repeat: no-repeat, repeat;}';
      break;     

      case 'infrared': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;filter: hue-rotate(180deg) saturate(2);}';
      break;     

      case 'night-vision': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);background-size: cover;background-position: center;background-blend-mode: overlay;}';
      break;     

      case 'warhol': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url('+imageData+');background-size: 50% 100%, 50% 100%, 50% 50%;background-position: top left, top right;background-repeat: no-repeat, no-repeat, repeat;background-blend-mode: color;}';
      break;     

      case 'selective-color': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after {   display: block;   content: "";   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: inherit;   background-color: red;   background-blend-mode: screen;   mix-blend-mode: color;filter: brightness(3);}';
      break;     

      case 'mirror-x': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after {   display: block;   content: "";   position: absolute;   top: 0;   bottom: 0;   background: inherit;}.final:before {   left: 0;   right: 50%; transform: scaleX(-1);}.final:after {   left: 50%;   right: 0;}';
      break;     

      case 'mirror-y': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after {display: block;content: "";position: absolute;left: 0;right: 0;background: inherit;}.final:before {top: 0;bottom: 50%;transform: scaleY(-1);}.final:after {top: 50%;bottom: 0;}';
      break;     

      default:  return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');}';
    }
  }


  $download.on('click', function() {
    function toDataUrl(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
          callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      xhr.open('GET', url);
      xhr.send();
    }


    var canvas = document.createElement('canvas');
    canvas.id = 'canvas';
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    // document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+imageWidth+'" height="'+imageHeight+'">' +
               '<foreignObject width="'+imageWidth+'" height="'+imageHeight+'px">' +
               '<div style="width: '+imageWidth+'px; height:'+imageHeight+'px" xmlns="http://www.w3.org/1999/xhtml">' +
               '<style>'+getEffectStyle()+'</style>' +
                 '<div class="final"></div>' + 
               '</div>' +
               '</foreignObject>' +
               '</svg>';

    var DOMURL = window.URL || window.webkitURL || window;

    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);

    img.onload = function () {
      DOMURL.revokeObjectURL(url);
      ctx.drawImage(img, 0, 0);      
      var dataURL = canvas.toDataURL("image/png");          

      var link = document.createElement('a');
          link.download = 'ciao-'+currentEffect+'.png';
          link.href = dataURL;
          link.click();       
    };

    toDataUrl(url, function(base64Img) {
      img.src = base64Img;      
    });
  });


})(jQuery);

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions