Front-endTools

Front-end Tools

CSS backdrop-filter ジェネレーター

指定した要素の背面にエフェクトを実装できる、backdrop-filterのツールです。
ぼかし（blur）・明るさ（brightness）・コントラスト（contrast）・グレースケール(grayscale)・色相回転（hue-rotate）・反転（invert）・彩度（saturate）・セピア（sepia）・影（drop-shadow）などを複数指定することができます。
どのように活用したらいいか分からない方向けに、css filterのサンプルを用意
また、複数のサンプル画像やHTML要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です！

2021年3月現在、backdrop-filterはFirefoxとIEでは機能しません。
また、同じくbackdrop-filterのdrop-shadowも「ChromeとEdge」のみでしか機能しない上に、親要素にopacityの1未満（0.9999など）を指定しないと動作しません。
詳しくはCan I Useなどをご確認ください。

CSS backdrop-filter
.original-css-backdropFilter {
  width: 70%;
  height: 270px;
  background-color:rgba(255, 255, 255, 0.4);
  backdrop-filter: none;
}

ツールを使用するにあたっての注意

  • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
  • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール（デベロッパーツール）などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
  • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

blur（ぼかし）
brightness（明るさ）
contrast（コントラスト）
grayscale（グレースケール）
hue-rotate（色相回転）
invert（反転）
opacity（透過度）
saturate（彩度）
sepia（セピア）
drop-shadow（ドロップシャドウ）
サンプルの変更・アップロード
  • 選択中
  • 選択中
    JPG
  • 選択中
    JPG
  • 選択中
    背景透過PNG

  • Front-end Tools

    選択中
    HTML/CSS

その他の指定

サンプル一覧（見本）。試したいものを選択してください。プレビューが変更されます。

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。

  • オリジナル（original）

  • ぼかし（blur）

  • 輝度（brightness）

  • コントラスト（contrast）

  • グレースケール（grayscale）

  • 色相回転（hue-rotate）

  • 反転（invert）

  • filterの透過度（opacity）

  • 彩度（saturate）

  • セピア（sepia）

  • drop-shadow（影）

  • drop-shadow（影）複数

  • コントラスト + グレースケール

  • コントラスト + セピア

ツールの使い方について

・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

  • フリーランスとして生きていきたい。
  • HTML / CSSの書き方が分からない・不安がある
  • きちんと会社のホームページやブログを作ってみたい！
  • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
  • 好きな時間に好きな場所で仕事出来るようになりたい！
  • しっかり技術を身につけて、収入を上げたい。
  • 簡単に効率的にホームページを作れる方法やツールが知りたい！
  • 全くの初心者なので、プロからしっかりと学んでみたい
  • 外注すると高いので、自分で身に付けたい

こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。

マンツーマンの講座の詳細を見てみる

各CSSプロパティの説明

backdrop-filter

backdrop-filterは、対象の要素の背面の画像や要素にエフェクトをかけることができます。値として次のようなものを指定できます。

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

複数指定することもでき、複数指定する場合は半角スペースで区切ります。
記述例） filter: blur(3px) saturate(120%);
初期値はnoneです。
また、hoverなどと組み合わせることにより、CSSでアニメーションをさせることもできます。

「blur」は、要素をぼかします。単位は基本的にpxを使います。

「brightness」は、要素の明るさを調整します。明るくしたり、暗くしたりすることができます。100%（もしくは1）の値を指定すると、入力は変更されません。100%を超える値を指定することもできます。

「contrast」は、要素のコントラストを調整します。0%を指定すると完全にグレーの要素が作成されます。100%を指定すると、変化がありません。100%を超える値を指定すると、よりコントラストの高い結果が得られます。

「grayscale」は要素をグレースケール（モノクロ）にします。100%を指定すると完全にグレースケールになります。0%では変化がありません。

「hue-rotate」は要素の色相を回転します。0degでは変化がありません。360degを超える値は、回り込みになります。（420degの場合、60degとなる）

「invert」は、要素の色を反転させます。0%では変化がありません。100%で完全に反転されます。

「opacity」について詳しくは調査中です。

「saturate」は、要素の彩度を変化させます。100%では変化がありません。0%に近づくほど彩度が下がり、100%を超える値では彩度が上がります。

「sepia」は、要素をセピア調にします。0%では変化がありません。100%を指定すると完全にセピア調になります。

「drop-shadow」は、要素に影を指定します。box-shadowと似ていますが、insetが指定できません。それから、要素のフォルムに沿った影を生成します。背景が透過されたPNG画像には、透過されていない部分に沿った影を生成します。影は複数指定することも可能です。

ツール制作者に関するリンク