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.
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.
<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> |
.image{ | |
max-height:100vh; | |
margin:0 auto; | |
display:block; | |
} | |
.anaglyph3d{ | |
filter:saturate(50%) url(#anaglyph3d); | |
} |