Anaglyph 3D CSS Effect

anaglyph-3d-css-effect.markdown

Anaglyph 3D CSS Effect

Simple CSS SVG filter for creating a fake anaglyph 3D effect.

Try the Anaglyph 3D online photo filter in MockoFun

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<center>
  <h2>Anaglyph 3D CSS Effect</h2>
  <p>Try the <a href="https://www.mockofun.com/tutorials/anaglyph-3d/">Anaglyph 3D</a> online photo filter in <a href="https://www.mockofun.com/">MockoFun</a></p>
</center>

<img src="https://cdn.pixabay.com/photo/2014/08/01/15/51/manhattan-407703_1280.jpg" class="image anaglyph3d">

<svg>
  <defs>
    <filter id="anaglyph3d">
      <feOffset in="SourceGraphic" dx="-4" dy="0" result="left"/>
      <feOffset in="SourceGraphic" dx="4" dy="0" result="right"/>
      <feComponentTransfer in="left" result="leftRed">
        <feFuncR type="identity"></feFuncR>
        <feFuncG type="discrete" tableValues="0"></feFuncG>
        <feFuncB type="discrete" tableValues="0"></feFuncB>
      </feComponentTransfer>

      <feComponentTransfer in="right" result="rightCyan">
        <feFuncR type="discrete" tableValues="0"></feFuncR>
        <feFuncG type="identity"></feFuncG>
        <feFuncB type="identity"></feFuncB>
      </feComponentTransfer>
      <feBlend in="leftRed" in2="rightCyan" mode="screen"/>
      
    </filter>
  </defs>
</svg>

style.css

.image{
  max-height:100vh;
  margin:0 auto;
  display:block;
}

.anaglyph3d{
  filter:saturate(50%) url(#anaglyph3d);
}