JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

Blur (Desfocar)<br>
<img class="blur" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Grayscale (Preto e branco)<br>
<img class="gray" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Drop Shadow (Semelhante ao box-shadow, mas com suporte a PNG)<br>
<img class="drop-shadow" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Sepia (Efeito sépia, aquele efeito de imagens antigas)<br>
<img class="sepia" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Brightness (Luminosidade)<br>
<img class="brightness" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Contrast (Contraste)<br>
<img class="contrast" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Hue-rotate (Outro efeito para brincar um pouco com a saturação da imagem)<br>
<img class="hue-rotate" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Invert (Inverte as cores da imagem)<br>
<img class="invert" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Saturate (Saturação)<br>
<img class="saturate" src="http://i.imgur.com/kXX1t2o.jpg"><br>
    
Opacity (Opacidade)<br>
<img class="opacity" src="http://i.imgur.com/kXX1t2o.jpg"><br>

CSS

body{font:13px Trebuchet MS;font-weight:bold;}
img{width: 300px;margin:5px;display:block;}
.blur{
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -MOZ-filter: blur(10px);
}
.gray{
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
}
.drop-shadow{
    filter: drop-shadow(20px 20px 20px black);
    -webkit-filter: drop-shadow(20px 20px 20px black);
    -moz-filter: drop-shadow(20px 20px 20px black);
}
.sepia{
    filter: sepia(1);
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
}
.brightness{
    filter: brightness(2.7);
    -webkit-filter: brightness(2.7);
    -moz-filter: brightness(2.7);
}
.contrast{
    filter: contrast(1.5);
    -webkit-filter: contrast(1.5);
    -moz-filter: contrast(1.5);
}
.hue-rotate{
    filter: hue-rotate(30deg);
    -webkit-filter: hue-rotate(30deg);
    -moz-filter: hue-rotate(30deg);
}
.invert{
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
}
.saturate{
    filter: saturate(1.5);
    -webkit-filter: saturate(1.5);
    -moz-filter: saturate(1.5);
}
.opacity{
    filter: opacity(0.6);
    -webkit-filter: opacity(0.6);
    -moz-filter: opacity(0.6);
}