CodePen Embed - filter

<h1>明度の変更（Brightness）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="brightness0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="brightness100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>200%</h2>
        <img class="brightness200" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>色相の変更（Hue-rotate）</h1>
<div class="wrap">
    <div class="box">
        <h2>0deg</h2>
        <img class="hue-rotate0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>90deg</h2>
        <img class="hue-rotate90" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>180deg</h2>
        <img class="hue-rotate180" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>彩度の変更（Saturate）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="saturate0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="saturate100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>200%</h2>
        <img class="saturate200" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>階調・ネガポジ反転（Invert）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="invert0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>50%</h2>
        <img class="invert50" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="invert100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>コントラスト（Contrast）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="contrast0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="contrast100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>200%</h2>
        <img class="contrast200" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>グレースケール・モノクロ（Grayscale）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="grayscale0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>50%</h2>
        <img class="grayscale50" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="grayscale100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>セピア（Sepia）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="sepia0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>50%</h2>
        <img class="sepia50" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="sepia100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>ぼかし（Blur）</h1>
<div class="wrap">
    <div class="box">
        <h2>0px</h2>
        <img class="blur0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
        <div class="box">
        <h2>5px</h2>
        <img class="blur5" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>10px</h2>
        <img class="blur10" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>透明度・透過率（Opacity）</h1>
<div class="wrap">
    <div class="box">
        <h2>0%</h2>
        <img class="opacity0" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>50%</h2>
        <img class="opacity50" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>100%</h2>
        <img class="opacity100" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
</div>

<h1>影・ドロップシャドウ（Drop Shadow）</h1>
<div class="wrap">
    <div class="box">
        <h2>drop-shadow：JPEG</h2>
        <img class="drop-shadow-j" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161128_42466f414a.jpg" alt="img">
    </div>
    <div class="box">
        <h2>drop-shadow：PNG</h2>
        <img class="drop-shadow-p" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161609_5a70526c62.png" alt="img">
    </div>
    <div class="box">
        <h2>box-shadow：PNG</h2>
        <img class="box-shadow-p" src="https://f.uploader.xzy.pw/eu-prd/upload/20191108161609_5a70526c62.png" alt="img">
    </div>
</div>

.wrap{
    display:flex;
    margin-bottom:40px;
}
.box{
        width:30%;
        margin-right:3%;
}
.box img{
    width:100%;
}
h1{
     font-size:26px;
    margin-bottom:20px;
    margin-block-end: 0;
}
h2{
    font-size:20px;
    margin-bottom:10px;
}


.brightness0{
    filter: brightness(0%);
}
.brightness100{
    filter: brightness(100%);
}
.brightness200{
    filter: brightness(200%);
}

.hue-rotate0{
     filter: hue-rotate(0deg)
}
.hue-rotate90{
     filter: hue-rotate(90deg)
}
.hue-rotate180{
    filter: hue-rotate(180deg)
}

.saturate0{
    filter: saturate(0%);
}
.saturate100{
    filter: saturate(100%);
}
.saturate200{
    filter:saturate(200%);
}

.invert0{
    filter: invert(0%);
}
.invert50{
    filter: invert(50%);
}
.invert100{
    filter:invert(100%);
}

.contrast0{
    filter: contrast(0%);
}
.contrast100{
    filter: contrast(100%);
}
.contrast200{
    filter:contrast(200%);
}

.grayscale0{
    filter: grayscale(0%);
}
.grayscale50{
    filter: grayscale(50%);
}
.grayscale100{
    filter:grayscale(100%);
}

.sepia0{
    filter: sepia(0%);
}
.sepia50{
    filter: sepia(50%);
}
.sepia100{
    filter:sepia(100%);
}

.blur0{
   filter: blur(0px);
}
.blur5{
    filter: blur(5px);
}
.blur10{
    filter: blur(10px);
}

.opacity0{
    filter:opacity(0%);
}
.opacity50{
    filter: opacity(50%);
}
.opacity100{
    filter:opacity(100%);
}

.drop-shadow-j{
    filter: drop-shadow(5px 5px 10px #666);
}
.drop-shadow-p{
    filter: drop-shadow(5px 5px 10px #666);
}
.box-shadow-p{
   box-shadow:5px 5px 10px #666;
}

This Pen is owned by aoyagiyumi on CodePen.

See more by @aoyagiSol on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.