画像用CSSフィルター（filter）ジェネレーター

写真を選ぶか、サンプルを使って、コントロールを動かします。元の写真は変わりません。効果はブラウザが適用します。

写真の効果をCSSだけで

マウスを重ねたときだけ適用する（ホバーで効果が消えます）

利用できる言語:

CSSのfilterプロパティは、ファイルを編集せずに写真の効果を適用します。写真を選んで、明るさ、コントラスト、彩度、グレースケール、セピア、色相、反転、ぼかし、不透明度、輪郭に沿った影（drop-shadow）を調整します。

用意されたフィルター（白黒、ビンテージ、寒色、暖色、色あせ、ビビッド、夜景）から始めて、CSSをコピーするか、フィルターを適用した画像をダウンロードします。ホバーのオプションは、マウスを重ねると写真が元に戻る定番の効果を作り、動きを減らしたい人の設定を尊重するトランジションを使います。

同じ写真で複数の効果を使えて、変化をアニメーションにもできます。たとえば、白黒の写真にマウスを重ねるとカラーになる、といった具合です。効果ごとにバージョンを保存する必要はありません。

重要です。フィルターは左から右に適用され、それぞれが直前の結果に対して働きます。そのため、セピアのあとに色相を変えるのと、逆の順序では、結果が異なります。

box-shadowは、画像の長方形の影を描きます。フィルターであるdrop-shadowは、見えている部分の輪郭に沿うため、ロゴや切り抜きのような、背景が透明なPNGやSVGでも使えます。

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。