cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="container">
  <h1><span></span>CSS3 Blend Mode Test</h1>
<p>A CSS Blend Mode testing platform, to test out different blend modes through HTML canvas and save the results for later. This will not work in IE.</p>
  <p>Click <a class="togins">Here</a> to see how to use it or learn more about this project <a href="http://acjdesigns.com/css-blend-mode-tester/" target="_blank">on my site</a></p>
<div id="colorcontainer">
  <div id="left">
    <h3>Image Test</h3>
    <div id="imagecontainer">
      <div id="colorblendmode"></div>
      <canvas id="image"></canvas>
    </div>
    <div id="palette">
      <div id="color-container">
        <div id="colorpick">
          <input type="text" id="color-picker"/>
        </div>
      </div>
      <div id="imgsrc">
      <span id="upload">Choose File</span>
      <input id="imgInp" type="file"/>
      </div>
      <div id="downloadcontainer">
        <div id="download"></div>
        <ul>
          <li><a id="fifty">50x50</a></li>
          <li><a id="onehundred">100x100</a></li>
          <li><a id="onefifty">150x150</a></li>
          <li><a id="original">Original</a></li>
        </ul>
        </div>
    </div>
  </div>
  <div id="right">
    <h3>CSS Styles</h3>
    <div id="style-library">
      <p>Current Blend Style: <span>Normal</span></p>
       <canvas id="normal"></canvas>
       <canvas id="multiply"></canvas>
       <canvas id="screen"></canvas>
       <canvas id="overlay"></canvas>
       <canvas id="darken"></canvas>
       <canvas id="lighten"></canvas>
       <canvas id="color-dodge"></canvas>
       <canvas id="color-burn"></canvas>
       <canvas id="hard-light"></canvas>
       <canvas id="soft-light"></canvas>
       <canvas id="difference"></canvas>
       <canvas id="exclusion"></canvas>
       <canvas id="hue"></canvas>
       <canvas id="saturation"></canvas>
       <canvas id="color"></canvas>
       <canvas id="luminosity"></canvas>
      <div style="clear: both"></div>
    </div>
  </div>
</div>
  <div id="instructionscontainer">
    <a class="togins" id="closeins">&times;</a>
    <div id="instructions">
      <h3>Instructions</h3>
    <p>Here's how to use it:</p>
  <ol>
    <li>Click the bottom left box that has a checkered background and has the arrow to the right of it.</li>
    <li>A box will appear. This is our <i>Color Picker</i>. Click around and find a color that you like.</li>
    <li>After you pick your color that you like, click the button that says "Choose".</li>
    <li>Next, a new button will appear that says "Choose File". Click this button and pick an image that you'd like to use</li>
    <li>You will now see your image, probably stretched in some way, in the left side and in a bunch of boxes on the right. The right side shows all of the blend modes. Click on any of the boxes to see the effect on the left.</li>
    <li>Voila! You've made your first blend mode image test.</li>
  </ol>
  <h3>Like the image?</h3>
  <p>You can save your result in any of the following sizes: 50x50, 100x100, 150x150, and that canvas size. To do so, follow the instruction below:</p>
  <ol>
    <li> Click the button to the right of the "Choose File" button that has the arrow on it. This is the "Download File" button.</li>
    <li>Choose what size you want.</li>
    <li>A box the size you selected will appear with your image in it. Right click on the image, click "Save Image" or "Save Image As".</li>
    <li>Navigate to the folder where you want to save your new image, name then image, then click "Save image as".</li>
  </ol>
  </div>
</div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Arimo:400,700);
html, body{
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#container{
  .togins, .togins+a{
    color: red;
    padding-bottom: 3px;
    border-bottom: 1px solid red;
    text-decoration: none;
    &:hover{
      cursor: pointer;
    }
  }
  #colorcontainer, p, h1, ol{
    margin: 20px 25%;
    display: block;
    position: relative;
    clear: both;
    width: 80%;
    max-width: 715px;
  }
  h1{
    span{
      position: relative;
      margin-right: 12px;
      width: 15px;
      height: 15px;
      background: rgba(255,0,0,0.65);
      border-radius: 50%;
      display: inline-block;
      top: -5px;
      &:before{
        content: "";
        width: 15px;
        height: 15px;
        background: rgba(0,0,255,0.65);
        border-radius: 50%;
        display: block;
        position:absolute;
        left: -5px;
        top: 7.5px;
      }
      &:after{
        content: "";
        width: 15px;
        height: 15px;
        background: rgba(255,255,0,0.65);
        border-radius: 50%;
        position: absolute;
        display: block;
        right: -5px;
        top: 7.5px;
      }
    }
  }
}
#colorcontainer{
  background: #eee;
  border-radius: 3px;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 0px 1px white inset;
  #left{
    width: 50%;
    position: relative;
    float: left;
    display: block;
    height: 100%;
    padding-bottom: 1em;
    &>h3{
      margin-left: 1em; 
    }
    #imagecontainer{
      width: 325px;
      height: 325px;
      background: #999;
      margin-left: 1rem;
      margin-top: 0;
      position: relative;
      #image{
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #999;
        z-index: 100;
      }
      #mixincolor{
        z-index: 200;
        height:100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    #palette{
      width: 80%;
      margin-left: 1em;
      margin-top: 1em;
      #downloadcontainer{
        display: none;
        position: relative;
        box-shadow: 0px 0px 0px 1px white inset;
        border-radius: 3px;
      }
      #download{
        border: 1px solid #999;
        position: relative;
        float: left;
        left: 1.5%;
        width: 16%;
        padding-bottom: 16%;
        background-image: url(http://192.185.4.38/~acj/codepen/assets/downloadicon.png);
        background-position: center;
        background-repeat: no-repeat;
        &:hover{
          cursor: pointer;
        }
        &+ul{
          display: none;
          background: #eee;
          border: 1px solid #999;
          position: absolute;
          top: 20px;
          right: 0;
          width: 100px;
          list-style: none;
          padding: 10px;
          margin: 0;
          li{
            margin: 0;
            &:hover{
              cursor: pointer;
            }
          }
        }
      }
      div{
        &#color-container{
        width: 18%;
        padding: 0;
        border: #999 1px solid;
        border-radius: 3px;
        box-shadow: 0px 0px 0px 1px white inset;
        position: relative;
        float: left;
        margin-right: 5px;
        padding-right: 15px;
          #colorpick{
            width: 100%;
            margin-top:10%;
            margin-left: 10%;
            margin-bottom: 10%;
            border-radius: 3px;
            .sp-replacer{
              border: 1px solid #999;
              width:100%;
            }
          }
      }
        &#imgsrc{
          display: none;
          width: 52%;
          border:1px solid #999;
          padding-bottom: 16%;
          float:left;
          position: relative;
          box-shadow: 0px 0px 0px 1px white inset;
          border-radius: 3px;
          #upload{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 14px 0;
          }
          input{
            opacity: 0;
            filter: alpha(opacity=0);
            width:100%;
            height:100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }
    #colorblendmode{
      position: absolute;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      color: white;
      z-index: 300;
      width: 100%;
      box-sizing: border-box;
      p{
        margin: 3px 0;     
        font-size: 15px;
        width: 100%;
      }
      p#bmname{
        text-transform: capitalize;
      }
    }
  }
   #right{
    width: 50%;
    position: relative;
    float: left;
    #style-library{
      list-style-type: none;
      padding: 20px;
      border: 1px solid #999;
      border-radius: 3px;
      box-shadow: 0px 0px 0px 1px white inset;
      p{
        font-weight: bold;
        margin-left: 0;
        margin-top: 0;
        span{
          text-transform: capitalize;
        }
      }
      canvas{
        border: 1px solid #999;
        width: 73px;
        height: 73px;
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
        margin-right: 1.5%;
        margin-bottom: 1.5%;
        display: block;
        position: relative;
        float: left;
        &:nth-child(4n+1){
          margin-right: 0;
        }
      }
     }
  }
  &:after{
    display: table;
    content: "";
    clear: both;
  }
}
#lightbox{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 300;
}
#lbimg{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
/*  width: 327px;
  height: 327px;*/
  border: 10px solid #FFF;
  img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #exit{
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    background: #FFF;
    padding: 3px 3px 5px 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    z-index: 200000;
    &:hover{
      cursor: pointer;
    }
  }
}
#instructionscontainer{
  position: fixed;
  top: 0;
  right: -10px;
  /* width: 30%; */
  width: 0%;
  height: 100%;
  overflow: hidden;
  background: #FFF;
  border-left: 1px solid #999;
  box-shadow: 0px 0px 10px #888888;
  #instructions{
    overflow-y: scroll;
    height: 95%;
    width: 100%;
    padding-right: 15px;
  }
  p, h1, ol, h3{
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 3px;
  }
  p, ol{
    font-size:14px;
  }
  h3{
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 25px;
  }
  li{
    margin: 10px 0;
    color: black;
    &:hover{
      color: red;
    }
  }
  #closeins{
    background: red;
    color: #FFF;
    padding: 3px 11px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 30px;
  }
}
            
          
!
            
              var imagefile, idArray = ['image', 'normal', 'multiply', 'screen', 'overlay','darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'], rectangle, newcolor, $this = '', blendmode = 'normal';

//David Walsh Conversion
function convertCanvasToImage(canvas,cvwidth,cvheight) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
  $('#lbimg').append(image);
  $('#lbimg').css({'width': cvwidth, 'height': cvheight});
}
function clearCanvas(thisid){
    var thisCv = document.getElementById(thisid);
    var ctx = thisCv.getContext('2d');
    ctx.clearRect(0, 0, thisCv.width, thisCv.height);
}
/*github: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded*/
function readURL(input, thisid, blendmode) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var canvas = document.getElementById(thisid);
      var context = canvas.getContext('2d');
      context.globalCompositeOperation = blendmode;
      var cssImage = new Image();
      cssImage.onload = function() {
        // draw cropped image
        context.drawImage(cssImage, 0, 0, cssImage.width, cssImage.height, 0, 0, canvas.width, canvas.height);
      };
      cssImage.src = e.target.result;
    } 
     reader.readAsDataURL(input.files[0]);
        }
    }
  function redrawCanvas(phcolor, val1, bm){
    for(var i = 0; i<idArray.length; i++){
      clearCanvas(idArray[i]);
      createRec(idArray[i], phcolor);
      if(val1!==''){
        readURL(val1, idArray[i], idArray[i]);
      }
    }
  }
$("#color-picker").spectrum({
  color: "rgba(0,0,0,0)",
  preferredFormat: "hex",
  showInput: true,
  change: function(color) {
    newcolor = color.toHexString();
    $('#style-library p span').css({"color": newcolor});       
 redrawCanvas(newcolor,$this,blendmode);
    $('#colorcontainer #left #palette div#imgsrc').css({'display':'block'});
  }
});
function createRec(id,color){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = color;
    context.fill();
}
$("#imgInp").change(function(){
  $this = this;
  redrawCanvas(newcolor,$this,blendmode);
  $('#downloadcontainer').css({'display':'block'});
});
$('#style-library canvas').click(function(){
  blendmode = $(this).attr('id');
  $('#style-library p span').text(blendmode.replace('-',' '));
  clearCanvas('image');
  createRec('image', newcolor);
  readURL($this, 'image', $(this).attr('id'));
  var blendtext = document.getElementById('colorblendmode');
  blendtext.style.padding = '10px 20px';
  blendtext.innerHTML = '';
  blendtext.innerHTML += '<p id="bmname">Blend Mode Name: ' + $(this).attr('id').replace('-', ' ') + '</p>';
  blendtext.innerHTML += '<p>CSS Value: ' + $(this).attr('id') + '</p>';
  blendtext.innerHTML +='<p>Example Use: <br/><span style="margin-left: 10px; margin-top: 5px; display: inline-block;"><span style="color: cornflowerblue">background-blend-mode: </span><span style="color: gold">' + $(this).attr('id') + '</span>;</span></p>';
});
$('#download').click(function(){
  $('#download + ul').show();
});
$('#download + ul>li>a').click(function(){
  var lightbox = document.createElement('div');
 lightbox.id = "lightbox";
var imageinlb = document.createElement("div");
  imageinlb.id="lbimg";
  var exit = document.createElement("div");
  exit.id="exit";
  exit.innerHTML="&times;";
  exit.onclick = function(){
    $('#lightbox').remove();
  }
  $(imageinlb).append(exit);
  $(lightbox).append(imageinlb);
  $(lightbox).appendTo('body');
  if($(this).attr('id')==='fifty'){
 convertCanvasToImage(document.getElementById('image'), 50, 50);
  } else if($(this).attr('id')==='onehundred'){
 convertCanvasToImage(document.getElementById('image'), 100, 100);
  } else if($(this).attr('id')==='onefifty'){
 convertCanvasToImage(document.getElementById('image'), 150, 150);
  } else if($(this).attr('id')==='original'){
 convertCanvasToImage(document.getElementById('image'), 327, 327);
  }
});
$('.togins').click(function(){
if(Number($('#instructionscontainer').css('width').replace('px',''))<379){
 $('#instructionscontainer').velocity({'width':'30%'},{
   begin: function(){
     $('#instructionscontainer').velocity({'right':'0%'});
   }
 });
} else {
 $('#instructionscontainer').velocity({'width':'0%'},{
   complete: function(){
     $('#instructionscontainer').velocity({'right':'-10px'});
   }
 });
}
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console