Sample of CSS Filters

by coderabbitcrypto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/cosmo/bootstrap.min.css">
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0."/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>
<div class="container-fluid">
  <div class="row">
    <div class="col bg brightness">
      <div class="text">Filter: Brightness</div>
    </div>
    <div class="col bg contrast">
      <div class="text">Filter: Contrast</div>
    </div>
    <div class="col bg grayscale">
      <div class="text">Filter: Grayscale</div>
    </div>
    <div class="col bg saturate">
      <div class="text">Filter: Saturate</div>
    </div>
  </div>
  <div class="row">
    <div class="col bg sepia">
      <div class="text">Filter: Sepia</div>
    </div>
    <div class="col bg hue-rotate">
      <div class="text">Filter: HUe Rotate</div>
    </div>
    <div class="col bg invert">
      <div class="text">Filter: Invert</div>
    </div>
    <div class="col bg blur">
      <div class="text">Filter: Blur</div>
    </div>
  </div>
  <div class="row">
    <div class="col bg opacity">
      <div class="text">Filter: Opacity</div>
    </div>
    <div class="col bg dropshadow">
      <div class="text">Filter: Drop Shadow</div>
    </div>
    <div class="col bg url">
      <div class="text">Filter: Url (Custom Filter)</div>
    </div>
    <div class="col bg combined">
      <div class="text">Filter: Combined Filters</div>
    </div>
  </div>  
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 0px;
}
.bg{
  background-image: url('https://source.unsplash.com/AnqP7foczmw');
  background-size:cover;
  background-repeat:no-repeat;
  min-height: 350px;
  margin: 0px 0px 15px 15px;
}
.bg .text{
  border: solid 4px #F00;
  width: 100%;
  position: absolute;
  bottom:0;
  background-color: #FFF;
  padding: 10px;
  text-align:center;
}

/* CSS Filters Test */

.brightness{
  filter: brightness(150%);
}
.contrast{
  filter: contrast(150%);
}
.grayscale{
  filter: grayscale(100%);
}
.saturate{
  filter: saturate(100%);
}
.sepia{
  filter: sepia(100%);
}
.hue-rotate{
  filter: hue-rotate(90deg);
}
.invert{
  filter: invert(100%);
}
.blur{
  filter: blur(1px);
}
.opacity{
  filter: opacity(75%);
}
.dropshadow{
  filter: drop-shadow(5px 2px 2px #666);
}
.url{
  filter: url('#greenish');
}

.combined {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  96% {
    filter: brightness(400%);
  }
}