<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid zero-pad div-header"> <h2 class="text-center" style="color:#FFFFFF;background-color:black;margin:0;padding-bottom:20px;padding-top:20px">CSS Filter Demo</h2> </div> <div class="container-fluid zero-pad div-content"> <div class="col-sm-7 zero-pad"> <img id="demoImg" class="img-responsive img" src="http://www.funnydam.com/uploads/shri_radha_krishna_wallpapers_3417315599.jpg" alt="Image not found..."/> <a class="btn btn-square-to-round btn-bordered-warning resetBtn"><span class="glyphicon glyphicon-repeat" onclick="imgReset()"></span></a> </div> <div class="col-sm-5"> <form class="form-horizontal"> <div class="form-group"> <label class="col-xs-6">Grayscale</label> <div class="col-xs-6"> <input id="Grayscale" class="form-control input-sm" placeholder="Grayscale" type="number" min="0" max="1" step="0.05" value="0" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Sepia</label> <div class="col-xs-6"> <input id="Sepia" class="form-control input-sm" placeholder="Sepia" type="number" min="0" max="1" step="0.05" value="0" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Saturate</label> <div class="col-xs-6"> <input id="Saturate" class="form-control input-sm" placeholder="Saturate" type="number" min="0" max="1" step="0.05" value="1" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Hue-Rotate</label> <div class="col-xs-6"> <input id="HueRotate" class="form-control input-sm" placeholder="Hue-Rotate" type="number" min="0" max="360" step="5" value="0" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Invert</label> <div class="col-xs-6"> <input id="Invert" class="form-control input-sm" placeholder="Invert" type="number" min="0" max="1" step="0.05" value="0" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Opacity</label> <div class="col-xs-6"> <input id="Opacity" class="form-control input-sm" placeholder="Opacity" type="number" min="0" max="1" step="0.05" value="1" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Brightness</label> <div class="col-xs-6"> <input id="Brightness" class="form-control input-sm" placeholder="Brightness" type="number" min="0" max="1" step="0.05" value="1" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Contrast</label> <div class="col-xs-6"> <input id="Contrast" class="form-control input-sm" placeholder="Contrast" type="number" min="0" max="2" step="0.05" value="1" onchange="imgFilter()"/> </div> </div> <div class="form-group"> <label class="col-xs-6">Blur</label> <div class="col-xs-6"> <input id="Blur" class="form-control input-sm" placeholder="Blur" type="number" min="0" max="10" step="1" value="0" onchange="imgFilter()"/> </div> </div> <kbd class="kbd">Actual CSS</kbd> <textarea id="cssCode" class="form-control cssCode" style="background-color:#FFFFFF" wrap="off" rows="4"readonly="true"></textarea> </form> </div> </div>

.form-horizontal{padding-top:20px} .zero-pad{padding:0} .zero-margin{margin:0} .btn-bordered-warning{color:#F0AD4E;background:transparent;border:3px solid #F0AD4E;border-radius:0} .btn-bordered-warning:hover{color:#FFFFFF;border:3px solid #FFFFFF} .btn-lg{padding:10px 16px;font-size:18px;line-height:1.33} .btn-square-to-round:hover{border-radius:50px} .btn,img{transition:all 0.8s;-o-transition:all 0.8s;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;} .resetBtn{position:absolute;top:10px;right:10px} .kbd{border-radius:6px 6px 0 0;} .img{padding:8px}; .cssCode{border-radius:0 6px 6px 6px} .div-header{margin:15px 15px 0px 15px;border-bottom:0px;border-top:3px solid #F0AD4E;border-right:3px solid #5CB85C;border-bottom:0px;border-left:3px solid #D9534F} .div-content{margin:0px 15px 15px 15px;background:#F7F7F9;border-top:3px solid #428BCA;border-right:3px solid #D9534F;border-bottom:3px solid #5CB85C;border-left:3px solid #F0AD4E}

function imgFilter() { var image = document.getElementById('demoImg'); var grayscale = document.getElementById('Grayscale').value; var Sepia = document.getElementById('Sepia').value; var Saturate = document.getElementById('Saturate').value; var HueRotate = document.getElementById('HueRotate').value; var Invert = document.getElementById('Invert').value; var Opacity = document.getElementById('Opacity').value; var Brightness = document.getElementById('Brightness').value; var Contrast = document.getElementById('Contrast').value; var Blur = document.getElementById('Blur').value; var CssCode = document.getElementById('cssCode'); image.style="filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)"; image.style="-o-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)"; image.style="-moz-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)"; image.style="-webkit-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px)"; CssCode.innerHTML="filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);"; CssCode.innerHTML+="\n"+"-o-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);"; CssCode.innerHTML+="\n"+"-moz-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);"; CssCode.innerHTML+="\n"+"-webkit-filter:grayscale("+grayscale+") sepia("+Sepia+") saturate("+Saturate+") hue-rotate("+HueRotate+"deg) invert("+Invert+") opacity("+Opacity+") brightness("+Brightness+") contrast("+Contrast+") blur("+Blur+"px);"; } function imgReset() { var image = document.getElementById('demoImg'); document.getElementById('Grayscale').value="0"; document.getElementById('Sepia').value="0"; document.getElementById('Saturate').value="1"; document.getElementById('HueRotate').value="0"; document.getElementById('Invert').value="0"; document.getElementById('Opacity').value="1"; document.getElementById('Brightness').value="1"; document.getElementById('Contrast').value="1"; document.getElementById('Blur').value="0"; var CssCode = document.getElementById('cssCode'); image.style="filter:none"; image.style="-webkit-filter:none"; CssCode.innerHTML="filter:none;\n-o-filter:none;\-moz-filter:none;\n-webkit-filter:none"; }