Core CSS

Image Filters

This CSS Reference section displays the code for examples that illustrate the usage of CSS image filters.

ImageFilters.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net</title>
    <style>
      #idFiltersTable {
        border: 2px solid #CFAA80;
        background-color:#E0C0A0;
        margin:34px;
      }
      #idFiltersTable th, #idFiltersTable td {
        padding: 5px;
      }
      #idFiltersTable tr {
	    background-color:#FEFCFA;
      }
      img#idNone {
        filter: none;
      }
      img#idBlur {
        filter: blur(5px);
      }
      img#idBrightness {
        filter: brightness(150%);
      }
      img#idContrast{
        filter: contrast(150%);
      }
      img#idDropShadow{
        filter: drop-shadow(3px 3px 3px black);
      }
      img#idGrayScale{
        filter: grayscale(100%);
      }
      img#idHueRotate{
        filter: hue-rotate(180deg);
      }
      img#idInvert{
        filter: invert(100%);
      }
      img#idOpacity{
        filter: opacity(50%);
      }
      img#idSaturate{
        filter: saturate(50%);
      }
      img#idSepia{
        filter: sepia(100%);
      }
    </style>
  </head>
  <body>
    <table id="idFiltersTable">
      <tr style="width:300px;background-color:#F8F4E8;">
        <th>Filter</th>
        <th>Appearence</th>
      </tr>
      <tr>
        <td>none</td>
        <td><img id="idNone" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>blur(5px)</td>
        <td><img id="idBlur" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>brightness(150%)</td>
        <td><img id="idBrightness" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>contrast(150%)</td>
        <td><img id="idContrast" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>drop-shadow(3px 3px 3px black)</td>
        <td><img id="idDropShadow" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>grayscale(100%)</td>
        <td><img id="idGrayScale" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>hue-rotate(180deg)</td>
        <td><img id="idHueRotate" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>invert(100%)</td>
        <td><img id="idInvert" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>opacity(50%)</td>
        <td><img id="idOpacity" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>saturate(50%)</td>
        <td><img id="idSaturate" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
      <tr>
        <td>sepia(100%)</td>
        <td><img id="idSepia" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td>
      </tr>
    </table>
  </body>
</html>
 

Output

Filter Appearence
none
blur(5px)
brightness(150%)
contrast(150%)
drop-shadow(3px 3px 3px black)
grayscale(100%)
hue-rotate(180deg)
invert(100%)
opacity(50%)
saturate(50%)
sepia(100%)
 
 

© 2007–2022 XoaX.net LLC. All rights reserved.