CSS filterジェネレーター

CSS filterジェネレーターの使い方

CSS filterジェネレーターでは、CSSのfilterプロパティによるぼかし・明るさ・コントラスト・彩度・色相などの効果を、プレビューで確認しながら調整できます。

1. プレビュー画像を選択する

初期表示のサンプル画像をそのまま使用するか、「ファイルを選択」から手持ちの画像を読み込んでfilterの効果を確認します。（読み込んだ画像はブラウザ内でのみ使用され、サーバーへ送信・保存されません。）

画像を解除するとサンプル画像へ戻ります。

2. 各filter関数の値を調整する

基本のfilter関数は、各項目のレンジスライダーまたは数値入力から値を変更します。設定内容はリアルタイムでプレビューと生成コードに反映されます。

このジェネレーターでは、以下のfilter関数を調整できます。

• blur()：ぼかし
• brightness()：明るさ
• contrast()：コントラスト
• saturate()：彩度
• grayscale()：グレースケール
• sepia()：セピア
• hue-rotate()：色相
• invert()：色反転
• opacity()：不透明度
• drop-shadow()：ドロップシャドウ

各項目の「クリア」ボタンを押すと、そのfilter関数だけを効果のない初期値へ戻せます。使用していないfilter関数は生成されるCSSから自動的に省略されます。

drop-shadow()の設定について

drop-shadow()をONにすると、X・Y位置、ぼかし、不透明度、色を設定できます。

「シャドウを追加」から複数の影を作成できます。複数のシャドウがある場合は、項目間の矢印ボタンで順番を入れ替えられます。

各シャドウの見出しを押すと設定欄を折りたため、右側の×ボタンで削除できます。シャドウが1つだけの場合、削除ボタンは表示されないため、シャドウを完全に削除する場合はdrop-shadow()の設定をOFFにしてください。

3. filterの適用順を変更する

複数種類のfilterが有効になると「filterの適用順」が表示され、項目をドラッグ＆ドロップして順番を変更できます。ドラッグ用ボタンにフォーカスして上下の矢印キーで移動することもできます。

CSSのfilterは記述された順番で適用されるため、同じ値でも順番によって見た目が変わる場合があります。

filter: brightness(120%) contrast(140%);

filter: contrast(140%) brightness(120%);

4. プレビューで効果を比較する

設定したfilterはプレビューへリアルタイムで反映されます。プレビュー右上の「フィルター適用後」と「元画像」を切り替えると、適用前後の違いを比較できます。

5. 生成されたCSSをコピーする

調整が完了したら、「コピーする」ボタンから生成されたfilterプロパティをコピーします。すべてのfilter関数が初期値の場合はfilter: none;が生成されます。

「リセット」ボタンで、filter設定と適用順、drop-shadowの設定を初期状態へ戻せます。読み込んだ画像はリセット後も保持されます。

CSS filterの解説

filterは、要素の表示にぼかし・明るさ・コントラスト・彩度・色相変更などの視覚効果を加えるCSSプロパティです。

例えば、

filter: brightness(120%) contrast(110%) saturate(130%);

と指定すると、対象要素を明るくしながらコントラストと彩度を強くできます。

filterは画像以外にも、テキストや背景などを含むHTML要素などに適用できます。

各filter関数について

blur()

blur()は要素をぼかします。値が大きいほどぼかしが強くなり、0pxではぼかしは適用されません。

filter: blur(4px);

brightness()

brightness()は要素の明るさを調整します。100%が元の明るさで、小さい値では暗く、大きい値では明るくなります。

filter: brightness(120%);

contrast()

contrast()はコントラスト（明るい部分と暗い部分の差）を調整します。100%が元の状態で、値を大きくするとコントラストが強くなります。

filter: contrast(130%);

saturate()

saturate()は色の鮮やかさを調整します。100%が元の彩度で、0%では彩度がなくなり、100%を超えるとより鮮やかになります。

filter: saturate(150%);

grayscale()

grayscale()は要素をグレースケールへ変換します。0%では変化せず、100%で完全なグレースケールになります。

filter: grayscale(100%);

sepia()

sepia()は要素にセピア調の色合いを加えます。0%では変化せず、値を大きくするほど効果が強くなります。

filter: sepia(100%);

hue-rotate()

hue-rotate()は色相環を回転させるように色を変化させます。0degまたは360degでは元の色相になります。

filter: hue-rotate(90deg);

invert()

invert()は要素の色を反転します。0%では変化せず、100%で完全に色が反転します。

filter: invert(100%);

opacity()

opacity()はfilter内で要素の不透明度を調整します。100%が完全に不透明な状態で、値を小さくすると透明になります。

filter: opacity(60%);

単純に要素全体の透明度だけを変更する場合は、通常のopacityプロパティも利用できます。

drop-shadow()

drop-shadow()は要素の表示形状に沿って影を付けます。このジェネレーターでは複数の関数を組み合わせることもできます。

filter: drop-shadow(0 8px 8px rgb(0 0 0 / 30%));

filter: drop-shadow(0 8px 8px rgb(0 0 0 / 30%))
  drop-shadow(8px 16px 12px rgb(0 0 0 / 20%));

filterの適用順によって見た目が変わる理由

複数のfilter関数を指定した場合、それぞれの効果は左から順番に適用されます。

例えば、

filter: grayscale(100%) brightness(130%);

では、グレースケール化した後に明るさを上げますが、

filter: brightness(130%) grayscale(100%);

では、明るさを上げた後にグレースケール化します。

組み合わせによって違いが小さい場合もありますが、複数のfilter関数を使用するときは適用順も確認しておくと安心です。

filterとbackdrop-filterの違い

filterとbackdrop-filterは、効果を適用する対象が異なります。

filterは指定した要素そのものへ効果を適用します。

.element {
  filter: blur(4px);
}

一方、backdrop-filterは、要素の背後にあるコンテンツへ効果を適用します。

.element {
  backdrop-filter: blur(10px);
}

drop-shadow()とbox-shadowの違い

drop-shadow()とbox-shadowは、影の基準となる形状が異なります。

box-shadowは基本的に要素のボックスに対して影を付けます。

一方、drop-shadow()は画像やSVGなどの透明部分を考慮し、不透明な領域の形状に沿って影を付けられます。

そのため、背景が透明なPNG画像やSVGなどに影を付ける場合は、drop-shadow()が適していることがあります。

FAQ