CSS FILTER EFFECTS · 094

CSS Backdrop Filter Lab

背景レイヤーにfilter、パネルにbackdrop-filterを適用する。

LIVE FILTER COMPARISON

効果がかかる範囲を確認する

2 TARGETS

PRESET

TUNE THE EFFECT

ぼかし 16px 彩度 140% パネル背景の不透明度 32%

不透明度が高いほど、背後のぼかしは見えにくくなります。

BACKGROUND

背景の位置 50%

動きはボタンを押したときだけ始まります。

effects.local / comparisonPAUSED

FILTER ON BACKGROUND / BACKDROP ON PANEL

01 / ENTIRE BACKGROUND

背景レイヤーに適用

背景全体がぼける。パネルの外側も変わる。

02 / PANEL BACKDROP

パネルに適用し、その背後を加工

パネルの下だけぼける。外側は鮮明なまま。

背景の位置を変えると、パネルの下で何が起きているか確認できます。

COPY THE EFFECT

LIVE

効果の対象

パネルの背後

左は背景レイヤー全体にfilter、右はパネルにbackdrop-filterを適用しています。

現在の設定

blur(16px) / saturate(140%) / 白32%

コピーするCSSには効果とパネルの背景色を含めます。パネルの大きさや配置は含めません。

HOW IT WORKS

FILTER

左は背景用の要素にfilterを適用。背景全体がぼけ、パネルの外側も変わります。別要素のパネルと文字は鮮明です。

BACKDROP-FILTER

右はパネルにbackdrop-filterを適用。背後のうち、パネルを通して見える範囲だけがぼけます。外側と文字は鮮明です。

TRANSPARENCY

パネルが完全に不透明だと、背後への効果は見えません。背景色の不透明度と文字の読みやすさを一緒に確認してください。