This weekend we are going to make something amazing, we are going to re-create Photoshop!

Not entirely, but we’ll be playing with variable CSS Filters!

I choose to build a playground so people can understand what each filter’s effect is! I do hope you find it helpful.

Things we will address in this article are:

CSS VariablesCSS FiltersJavaScript Setting CSS Variables

Let’s get right to it!

HTML Structure

Our application is going to have one image on the left hand side, and then our slider controls on the right, so let’s start by creating this in HTML:

<div class="container">
  <img
    src="https://images.unsplash.com/photo-1508671323699-6df22ecaec2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80"
    id="main-image"
  />
  <div class="toolbox">
    <label>
      Blur
      <input id="blur" max="20" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Brightness
      <input id="brightness" max="1" min="0" step="0.1" type="range" value="1" />
    </label>
    <label>
      Contrast
      <input id="contrast" max="200" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Grayscale
      <input id="grayscale" max="100" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Hue
      <input id="hue" max="360" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Invert
      <input id="invert" max="100" min="0" step="1" type="range" value="0" />
    </label>
    <label>
      Opacity
      <input id="opacity" max="100" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Saturate
      <input id="saturate" max="200" min="0" step="1" type="range" value="100" />
    </label>
    <label>
      Sepia
      <input id="sepia" max="100" min="0" step="1" type="range" value="0" />
    </label>
  </div>
</div>

There we go, as you can see we are using the HTML range type sliders and give them default values, which are the normal values for each filter.

#css #html-css #javascript #frontend #css3 #html #web-development #css-filters