背景にガラス板のような美しいエフェクトを与える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);

/* <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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<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>

<p>backdrop-filter: none</p>

</div>

<p>backdrop-filter: blur(3px)</p>

</div>

<p>backdrop-filter: brightness(150%);</p>

</div>

<p>backdrop-filter: contrast(200%);</p>

</div>

<p>backdrop-filter: drop-shadow(4px 4px 10px blue);</p>

</div>

<p>backdrop-filter: grayscale(100%);</p>

</div>

<p>backdrop-filter: hue-rotate(120deg);</p>

</div>

<p>backdrop-filter: invert(70%);</p>

</div>

<p>backdrop-filter: opacity(50%);</p>

</div>

<p>backdrop-filter: sepia(90%);</p>

</div>

<p>backdrop-filter: saturate(3);</p>

</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);

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

環境

backdrop-filter

サンプルコード

C# ラムダ演算子で文字列を1文字ずつに分解する 2021.01.16

Alpine.jsを使ってhoverで表示されるツールチップを作成する 2021.01.16