---

HTML  CSS  JS Result
EDIT ON
 <div class="display"></div>
<form>
  <div>
    <label for="blend-top">Top Layer</label>
    <select id="blend-top">
      <option selected>normal</option>
      <option>multiply</option>
      <option>screen</option>
      <option>overlay</option>
      <option>darken</option>
      <option>lighten</option>
      <option>color-dodge</option>
      <option>color-burn</option>
      <option>hard-light</option>
      <option>soft-light</option>
      <option>difference</option>
      <option>exclusion</option>
      <option>hue</option>
      <option>saturation</option>
      <option>color</option>
      <option>luminosity</option>
    </select>
  </div>
  <div>
    <label for="blend-bottom">Middle Layer</label>
    <select id="blend-bottom">
      <option>normal</option>
      <option>multiply</option>
      <option>screen</option>
      <option>overlay</option>
      <option>darken</option>
      <option>lighten</option>
      <option>color-dodge</option>
      <option>color-burn</option>
      <option>hard-light</option>
      <option>soft-light</option>
      <option>difference</option>
      <option>exclusion</option>
      <option>hue</option>
      <option selected>saturation</option>
      <option>color</option>
      <option>luminosity</option>
    </select>
  </div>
  <div>
    <label for="color-v">Top Color</label>
    <select id="color-v">
      <option>transparent</option>
      <option selected>black</option>
      <option>green</option>
      <option>red</option>
      <option>hotpink</option>
      <option>blue</option>
      <option>yellow</option>
      <option>orange</option>
      <option>purple</option>
    </select>
  </div>
  <div>
    <label for="color">Middle Color</label>
    <select id="color">
      <option>transparent</option>
      <option selected>grey</option>
      <option>green</option>
      <option>red</option>
      <option>hotpink</option>
      <option>blue</option>
      <option>yellow</option>
      <option>orange</option>
      <option>purple</option>
    </select>
  </div>
</form>

Resources 1×0.5×0.25× Rerun