CSS Tips | 超実務コアCSSテクニック：カラー・背景 － filter応用

Web APP CSS
スポンサーリンク
スポンサーリンク

filter は「画像や要素に後からレタッチをかける」CSS版フォトショップ

filter は、要素そのものに
ぼかし・明るさ・コントラスト・彩度・モノクロ・セピア…などの
“画像加工フィルター” をかけるためのプロパティです。

backdrop-filter が「背景」に効くのに対して、
filter は 「その要素自身」 に効きます。
画像・サムネイル・カード・ホバー演出などでかなり使えます。

ここから、よく使うフィルターと応用パターンを
CSS と Tailwind CSS 両方で、初心者向けにかみ砕いていきます。

filter で使える主な効果とイメージ

よく使うフィルターの種類

blur(px)：ぼかす
brightness(値)：明るさ
contrast(値)：コントラスト
saturate(値)：彩度
grayscale(%)：モノクロ
sepia(%)：セピア調
hue-rotate(deg)：色相回転（色味をずらす）
drop-shadow(...)：要素の形に沿った影

複数をスペース区切りで組み合わせることもできます。

例1：画像をふんわりぼかす blur()

CSS 版

.img-blur {
  filter: blur(8px);
}
CSS
<img src="photo.jpg" class="img-blur" alt="ぼかし画像">
HTML

Tailwind 版

<img src="photo.jpg" class="blur-md" alt="ぼかし画像">
HTML

ぼかしは「背景用の画像」「サムネイルの奥行き」「モーダルの背景」などで使えます。
ただし、テキストにはあまり使わず、主にビジュアル要素向けです。

例2：画像を暗くして文字を読みやすくする brightness()

CSS 版

.img-dark {
  filter: brightness(0.6);
}
CSS
<div class="hero">
  <img src="hero.jpg" class="img-dark" alt="">
  <h1 class="hero-title">キャッチコピー</h1>
</div>
HTML

Tailwind 版

<div class="relative">
  <img src="hero.jpg" class="brightness-50 w-full h-64 object-cover" alt="">
  <h1 class="absolute inset-0 flex items-center justify-center text-white text-3xl font-bold">
    キャッチコピー
  </h1>
</div>
HTML

brightness を下げると、
写真の上に白文字を載せても読みやすくなります。
「画像を暗くするために黒いオーバーレイを重ねる」代わりに使える場面もあります。

例3：彩度を上げて“映えるサムネイル”にする saturate()

CSS 版

.thumb-vivid {
  filter: saturate(1.6);
}
CSS
<img src="thumb.jpg" class="thumb-vivid" alt="鮮やかなサムネイル">
HTML

Tailwind 版

<img src="thumb.jpg" class="saturate-150" alt="鮮やかなサムネイル">
HTML

saturate を上げると、
写真やイラストが「少しだけ映える」感じになります。
LP やカード一覧で、視線を集めたいサムネイルに向いています。

例4：ホバー時だけ彩度を上げる（インタラクション演出）

CSS 版

.card-thumb {
  transition: filter 0.25s ease;
  filter: saturate(1);
}

.card-thumb:hover {
  filter: saturate(1.5);
}
CSS
<img src="thumb.jpg" class="card-thumb" alt="">
HTML

Tailwind 版

<img src="thumb.jpg"
     class="transition filter saturate-100 hover:saturate-150"
     alt="">
HTML

「ホバーしたときだけ色がパッと鮮やかになる」演出は、
地味だけど UI の質感を一段上げてくれます。

例5：モノクロにして“ホバーでカラーに戻す” grayscale()

CSS 版

.logo-gray {
  filter: grayscale(100%);
  transition: filter 0.25s ease;
}

.logo-gray:hover {
  filter: grayscale(0%);
}
CSS
<img src="logo.png" class="logo-gray" alt="ロゴ">
HTML

Tailwind 版

<img src="logo.png"
     class="grayscale hover:grayscale-0 transition"
     alt="ロゴ">
HTML

ロゴ一覧・クライアントロゴ・ギャラリーなどで、
「通常は落ち着いたモノクロ、ホバーでカラー」という表現はよく使われます。

例6：セピア＋コントラストで“レトロ写真風”にする

CSS 版

.photo-vintage {
  filter: sepia(80%) contrast(1.1) brightness(0.95);
}
CSS
<img src="photo.jpg" class="photo-vintage" alt="レトロ風写真">
HTML

Tailwind 版（任意値併用）

<img src="photo.jpg"
     class="[filter:sepia(80%)_contrast(1.1)_brightness(0.95)]"
     alt="レトロ風写真">
HTML

複数の filter を組み合わせると、
「世界観を作るためのトーン調整」ができます。
ブランドの雰囲気に合わせて、写真の色味を統一したいときに便利です。

例7：hue-rotate で色相を回転させる（色違いバリエーション）

CSS 版

.btn-alt {
  filter: hue-rotate(40deg);
}
CSS
<button class="btn-alt">色相をずらしたボタン</button>
HTML

Tailwind 版

<button class="[filter:hue-rotate(40deg)] px-4 py-2 rounded text-white bg-sky-500">
  色相をずらしたボタン
</button>
HTML

hue-rotate は「色相環を回す」イメージで、
青→緑、赤→オレンジ…のように色味を変えられます。
同じ画像を色違いバリエーションとして見せたいときにも使えます。

例8：drop-shadow で“画像の形に沿った影”をつける

box-shadow は要素の矩形に対して影をつけますが、
filter: drop-shadow() は 画像の透過部分を除いた形 に影をつけます。

CSS 版

.icon-shadow {
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.45));
}
CSS
<img src="icon.png" class="icon-shadow" alt="アイコン">
HTML

Tailwind 版

<img src="icon.png"
     class="[filter:drop-shadow(0_8px_18px_rgba(15,23,42,0.45))]"
     alt="アイコン">
HTML

透過 PNG や SVG アイコンに使うと、
「形に沿った自然な影」がついて、浮いているように見えます。

filter と backdrop-filter の違いを整理しておく

filter：
要素そのもの（画像・テキスト・背景）に効く。
写真の色味調整・サムネイル演出・アイコンの影などに使う。

backdrop-filter：
要素の“背後にある背景”に効く。
グラスモーフィズム・モーダル背景・透明ナビバーなどに使う。

この違いを理解しておくと、
「どっちを使うべきか」で迷わなくなります。

実務でよく使う filter コンボ（Tailwind 例）

サムネイルのホバー演出

<img src="thumb.jpg"
     class="w-full h-48 object-cover rounded-xl
            filter brightness-90 saturate-100
            hover:brightness-110 hover:saturate-150
            transition"
     alt="">
HTML

通常時は少し落ち着いたトーン、
ホバー時に明るく・鮮やかになるパターンです。

ロゴ一覧のモノクロ → カラー

<img src="logo.png"
     class="h-10 grayscale opacity-70
            hover:grayscale-0 hover:opacity-100
            transition"
     alt="Logo">
HTML

クライアントロゴやパートナー一覧などで、
「ホバーしたときだけ主張する」上品な演出になります。

まとめ

filter は
「要素そのものにレタッチをかける」ための CSS の画像加工機能 です。

押さえておきたいポイントは、
blur：ぼかし
brightness / contrast / saturate：トーン調整
grayscale / sepia：世界観づくり
hue-rotate：色相変化
drop-shadow：形に沿った影

そして、
Tailwind では blur-* / brightness-* / contrast-* / saturate-* / grayscale / sepia などが用意されていて、
それ以外は [filter:...] の任意値で柔軟に書けます。

スポンサーリンク
タイトルとURLをコピーしました