Buy me a coffee
  • 1.  Floats & clears #1
  • 2. Floats & clears #2
  • 3. Positioning #1
  • 4. Fullscreen background
  • 5. CSS filters
  • 6. Making a menu
  • 7. CSS 3
  • 8. Responsive webdesign
  • CSS: FILTERSLet's filter the most random image on the internet.

    When I was a kid I had fun watching those two guys in black and white on ye old tv, falling over banana peels and off ladders. And with that sentence I realised how old I am. But in any case, the black and white effect is something that you’ll see on images as some sort of rollover effect a lot. Add a subtle transition and people will enjoy scrolling over and viewing your images. What you in most cases will have to do is provide two images, a normal, coloured picture and a black and withe version. And then you’ll have to do some magic with CSS to get the one behind the other. Well no, more! Introducing; filters.

    Note: The value you define in CSS for your filters will be between 0 and 1 or between 0% and 100%. So if you would like to apply the filter a little bit but not completely, you can define your value as a percent 50% or with a value of 0.5. In most cases it’s also not possible to specify a filter with a negative value. You now need to be glass half full kind of person.

    Possible filters

    For the purpose of this tutorial I'll be using the most random image on the internet, shown below.

    So, what filters are available? Here is my top 5:


    The grayscale filter converts your image into its grayscale equivalent. This can be done from 0 to a 100 percent, 0 being complete colourful and 100 being full black and white.

      -webkit-filter: grayscale(1);

    2. BLUR

    The blur filter applies an unsharpen effect to your image. This effect will be a Gaussian blur and you need to define a pixel value for the size of the blur. The bigger the value, the less sharp and thinner your effect will be.

      -webkit-filter: blur(10px);

    3. SEPIA

    The sepia filter applies a sepia effect to your image, changing it to a sepia one-color scheme. This can be done from 0 to a 100 percent, 0 being no visible effect and a 100 overlaying your image with a sepia colour.

      -webkit-filter: sepia(1);


    The brightness filter applies a shine or light, even darken effect to your image, changing its brightness levels. Every image has a standard of 100% light and can be made darker by using values lower than 100%, 0% being completely dark. They can even be given very high values to lighten up your image to extreme heights.

      -webkit-filter: brightness(300%);


    The drop-shadow filter is important because it works a little bit different then your ordenairy box-shadow. Whereas box-shadow will always create a shadow in the shape of a box (rectangle), hence the name, the drop-shadow filter will take over the shape of an image or vector perfectly, making it a better choice for unique shapes.

      -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));

    And some extra’s:

    1. Hue-rotate: adds a new colour profile, changing everything to funk!
    2. Saturation: let’s the colour be a bit more.. alive
    3. Invert: turns all the colours around
    4. Opacity: makes a source transparent (like with CSS opacity)

    The positives

    The negatives

      chrome firefox explorer safari opera
    Supported 31+ 35+ 18+ 7+

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy