【CSS】要素の背景に様々なエフェクト効果を設定できる「backdrop-filter」

こんにちは、ワタナベです！

今回は要素の背景に様々なエフェクト効果を設定できる「backdrop-filter」をご紹介

backdrop-filter

以下サンプルになります。

SAMPLE

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

対応ブラウザ

短いコードで簡単に要素の背景にエフェクト効果を設定できます！
複数設定することも可能です(^^♪

以下のようなジェネレーターツールもあるので、よく分からないな～って方は是非使ってみてください！
ドロップシャドウや透過度(opacity)は結構ややこしいな～と思いました(^^;

CSS Backdrop-filter ジェネレーター

 Front-end Tools - 高機能で直感的な、HTML/C...  1 user

Front-end Tools - 高機能で直感的な、HTML/CSSジェネレーター・シミュレーターの...

https://front-end-tools.com/generateBackDropFilter/

直感的にコンポーネントやアニメーションのデザインを制作することができるジェネレーター・ツールのサイトです。サンプルから選択した後、自動で生成されるコードを変更すれば良いだけ。高機能なボタン・グラデーション・box-shadow・filterなどを提供しています。

それではまた次回。

ご閲覧ありがとうございました♪