2025年04月1日(火)

CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました

• 0
• 7
• 0
• 3

CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。
画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。

そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を確認することができる「CSS Filter Preview」を作ってみたので紹介してみます。

CSS Filter Preview

「CSS Filter Preview」を別枠で表示

フィルター一覧

画面上のドラッグエリアに画像ファイルをドラッグ＆ドロップすると、画面下にfilterプロパティで設定できるフィルター効果が一覧で表示されます。

各フィルター効果はスライダーで値を変えることができ、画像に対して効果の強弱を見ながら設定を変更さ...