フィルター（ぼかし・明度など）

filterblur()brightness()grayscale()backdrop-filter

要素にグラフィカルフィルター効果を適用するプロパティです。filter は要素自体に、backdrop-filter は要素の背後にある領域に適用します。

デモ：filter 各関数

none（元の状態）

blur(4px)

brightness(0.5)

brightness(1.5)

contrast(2)

grayscale(1)

hue-rotate(180deg)

invert(1)

opacity(0.4)

saturate(3)

sepia(1)

drop-shadow()

デモ：複数フィルターの組み合わせ

モノクロ写真風

grayscale + brightness + contrast

ヴィンテージフィルター風

sepia + saturate + hue-rotate

鮮やかさUP（SNSフィルター風）

brightness + contrast + saturate

デモ：backdrop-filter（フロストグラス効果）

blur(4px)

軽いぼかし

blur(12px) + saturate

フロストガラス

blur(20px) + brightness

ダーク版

コード例

/* 単一フィルター */
.blur { filter: blur(4px); }
.bright { filter: brightness(1.5); }  /* 1が基準、>1で明るく */
.dark { filter: brightness(0.5); }    /* <1で暗く */
.contrast { filter: contrast(2); }   /* 1が基準、高いほどコントラスト強 */
.gray { filter: grayscale(1); }       /* 0-1、1で完全グレースケール */
.hue { filter: hue-rotate(180deg); } /* 色相を回転 */
.invert { filter: invert(1); }       /* 色を反転 */
.sepia { filter: sepia(0.8); }       /* セピア調 */
.saturate { filter: saturate(2); }   /* 0:グレー、1:元、>1:鮮やか */

/* drop-shadow: 透明部分を含む要素の影（box-shadowより優秀） */
.png-shadow {
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
}

/* 複数フィルター（スペース区切り） */
.vintage {
  filter: sepia(0.8) contrast(1.2) brightness(0.9);
}

/* backdrop-filter（フロストグラス効果） */
.glass {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ホバー時にグレースケール解除 */
.card {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.card:hover {
  filter: none;
}

比較：filter vs opacity / filter: drop-shadow vs box-shadow

観点	filter版	プロパティ版
filter: opacity() vs opacity	他のfilterと組み合わせ可能	子要素にも影響（スタッキングコンテキスト）
GPU使用	filter全般でGPUアクセラレーション	opacityもGPU使用
drop-shadow vs box-shadow	✅ 透明部分を含む実際の形に沿った影	ボックス（長方形）の外側に影
使いどころ	PNG・SVGなど透明背景のある画像	ボックス要素（div・カードなど）

filter: drop-shadow（SVG形状に沿う）

box-shadow（長方形のボックスに沿う）

NEWbackdrop-filter — フロストグラスエフェクト（2020〜2022年〜）

backdrop-filter は要素の背後にあるコンテンツにフィルターを適用します。 iOSのコントロールセンターのような「フロストガラス」効果が実現できる、比較的新しく非常に人気のあるプロパティです。Chrome 76+, Safari 9+, Firefox 103+対応。

/* フロストガラスカード */
.glass-card {
  /* 背景要素に適用（背後がぼける） */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%); /* Safari */

  /* 半透明の背景色が必要 */
  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

/* ナビバーの例 */
.navbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* フォールバック（未対応ブラウザ） */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

🤖 AIプロンプトテンプレート

CSSのfilterプロパティを使った画像・要素への視覚効果の実装例をReact + Tailwind CSSで作成してください。

要件:
- 主要フィルター関数: blur() / brightness() / contrast() / grayscale() / sepia() / hue-rotate() / invert() / saturate() / opacity() / drop-shadow()
- スライダーで各フィルターの値をリアルタイム調整できるインタラクティブデモ
- 複数フィルターの組み合わせ（filter: brightness(1.2) contrast(1.1) saturate(1.3)）の例
- backdrop-filter を使ったすりガラス（glassmorphism）エフェクトの実装
- ホバー時にフィルターを変化させるカード（grayscale → カラー）のデモ
- 実際の画像の代わりにグラデーションボックスで代用したデモ

フィルター値をリアルタイムで調整しながら効果を確認できるデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧

Zenn X ☕ Buy Me a Coffee