背景にガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」

作成日 2021.01.16
CSS
CSS3

これまでのfilterプロパティでは要素全体、子要素までフィルターの処理がかかっていましたが、backdrop-filterでは背景のみにfilter処理ができます。backdrop-filterの異なる値でそれぞれの処理がどのようになるかを画像サンプルで紹介しています。

- 0.1. 環境
- 0.2. backdrop-filter
1. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

backdrop-filter

backdrop-filterの値には以下の種類が用意されています。

/* <filter-function> 値 */

/* デフォルト */
backdrop-filter: none; 
/* ぼかし */
backdrop-filter: blur(2px); 
/* 明るさ */
backdrop-filter: brightness(150%); 
/* コントラスト */
backdrop-filter: contrast(200%); 
/* ドロップシャドウ */
backdrop-filter: drop-shadow(4px 4px 4px #000);
/* グレースケール */
backdrop-filter: grayscale(100%); 
 /* 色相反転 */
backdrop-filter: hue-rotate(120deg); 
/* 階調反転 */
backdrop-filter: invert(70%); 
/* 透明度 */
backdrop-filter: opacity(50%); 
/* セピア */
backdrop-filter: sepia(90%); 
/* 彩度 */
backdrop-filter: saturate(3);

サンプルコード

実際に同じ条件で各値のbackdrop-filterを設定したサンプルコードです。サンプルコードの後の表示結果を確認してください。
デフォルトとして、透明度50％の白背景を設定しています。

<section>
    <style>
        .fileterwrap {
            width: 46%;
            max-width: 300px;
            margin-right: 2%;
            margin-left: 2%;
            margin-bottom: 10px;
            background-image: url(https://mebee.info/wp-content/uploads/2021/01/photo20210115-e1610709095830.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            display: grid;
            place-items: center;
            height: 200px;
            float: left;
        }
        .filetersample {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 2px;
            font-family: sans-serif;
            text-align: center;
            line-height: 1;    
            max-width: 90%;
            padding: 20px 15px;
            font-weight: bold;
            font-family: 'ConsolasRegular';
        }
        /* デフォルト */
        .none {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        /* ぼかし */
        .blur {
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        /* 明るさ */
        .brightness {
            backdrop-filter: brightness(150%);
            -webkit-backdrop-filter: brightness(150%);
        }
        /* コントラスト */
        .contrast {
            backdrop-filter: contrast(200%);
            -webkit-backdrop-filter: contrast(200%);
        }
        /* ドロップシャドウ */
        .drop-shadow {
            backdrop-filter: drop-shadow(4px 4px 4px #000);
            -webkit-backdrop-filter: drop-shadow(4px 4px 4px #000);
        }
        /* グレースケール */
        .grayscale {
            backdrop-filter: grayscale(100%);
            -webkit-backdrop-filter: grayscale(100%);
        }
        /* 色相反転 */
        .hue-rotate {
            backdrop-filter: hue-rotate(120deg);
            -webkit-backdrop-filter: hue-rotate(120deg);
        }
        /* 階調反転 */
        .invert {
            backdrop-filter: invert(70%);
            -webkit-backdrop-filter: invert(70%);
        }
        /* 透明度 */
        .opacity {
            backdrop-filter: opacity(50%);
            -webkit-backdrop-filter: opacity(50%);
        }
        /* セピア */
        .sepia {
            backdrop-filter: sepia(90%);
            -webkit-backdrop-filter: sepia(90%);
        }
        /* 彩度 */
        .saturate {
            backdrop-filter: saturate(3);
            -webkit-backdrop-filter: saturate(3);
        }
    </style>
        
    <div class="fileterwrap">
        <div class="none filetersample">
            <p>backdrop-filter: none</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="blur filetersample">
            <p>backdrop-filter: blur(3px)</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="brightness filetersample">
            <p>backdrop-filter: brightness(150%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="contrast filetersample">
            <p>backdrop-filter: contrast(200%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="drop-shadow filetersample">
            <p>backdrop-filter: drop-shadow(4px 4px 10px blue);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="grayscale filetersample">
            <p>backdrop-filter: grayscale(100%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="hue-rotate filetersample">
            <p>backdrop-filter: hue-rotate(120deg);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="invert filetersample">
            <p>backdrop-filter: invert(70%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="opacity filetersample">
            <p>backdrop-filter: opacity(50%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="sepia filetersample">
            <p>backdrop-filter: sepia(90%);</p>
        </div>
    </div>
    <div class="fileterwrap">
        <div class="saturate filetersample">
            <p>backdrop-filter: saturate(3);</p>
        </div>
    </div>
    
</section>

ブラウザ上で表示した結果

backdrop-filter: none

backdrop-filter: blur(3px)

backdrop-filter: brightness(150%);

backdrop-filter: contrast(200%);

backdrop-filter: drop-shadow(4px 4px 10px blue);

backdrop-filter: grayscale(100%);

backdrop-filter: hue-rotate(120deg);

backdrop-filter: invert(70%);

backdrop-filter: opacity(50%);

backdrop-filter: sepia(90%);

backdrop-filter: saturate(3);