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）

  • 透過度（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：要素をぼかします。単位に%は使用できません。値にはガウシアンぼかし (ガウスぼかし、ガウシアンブラー、ガウシアンフィルター、ガウスフィルター、Gaussian Blur）が使われます。指定した値は画面上のいくつのピクセルが互いに溶け込むかを定義します。
  • brightness：要素の明るさを調整します。明るくしたり、暗くすることができます。100%（もしくは1）の値を指定すると、入力は変更されません。0%を指定すると、完全な黒の画像にすることができます。100%を超える値を指定することもできます。
  • contrast：要素のコントラストを調整します。0%を指定すると完全にグレーの要素が作成されます。100%を指定すると、変化がありません。100%を超える値を指定すると、よりコントラスト比の高い表示になります。
  • grayscale：要素をグレースケール（モノクロ）にします。100%を指定すると完全にグレースケールになります。0%では変化がありません。
  • hue-rotate：要素の色相を回転します。0degでは変化がありません。360degを超える値は、回り込みになります（420degの場合、60degとなる）。
    ※色相とは赤・オレンジ・黄・緑・青・水色・紫のように、色を特徴づける色みのことで、色の三属性（色相・明度・彩度）の一つです。
  • invert：要素の色を反転させます。0%では変化がありません。100%で完全に反転されます。
  • opacity：要素の透過度を指定します。0%の値を指定すると、完全に透明になります。100%では変化がありません。CSSのopacityプロパティと結果は同じですが、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。
  • saturate：要素の彩度を変化させます。100%では変化がありません。0%に近づくほど彩度が下がり、100%を超える値では彩度が上がります。0%の値を指定すると、無彩色になります。
  • sepia：要素をセピア調にします。0%では変化がありません。100%を指定すると完全にセピア調になります。
  • drop-shadow：要素に影を指定します。box-shadowと似ていますが、insetが指定できません。それから、要素のフォルムに沿った影を生成します。背景が透過されたPNG画像には、透過されていない部分に沿った影を生成します。影は複数指定することも可能です。具体的には入力画像のアルファマスクを特定の色で、ずらしてぼかして描画したものを画像の下に合成したものです。一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションで表示されます。
    全部で4つの値を指定することができ、drop-shadow(水平方向のずらし量垂直方向のずらし量影のぼかし量影の色) のように指定することができます。
    記述例）backdrop-filter: drop-shadow(5px 4px 3px #555);
color
Webで色を指定する場合は、「HEX」「RGB」「HSL」を使用することが多いです。
まず、一番よく目にするHEXは（hexadecimal number/ヘキサデシマル）のことで、16進数による色の表現方法です。#1234ab のような形で表現されます。
#以降の6桁は1~2桁目が赤（red）、3~4桁目が緑（green）、5~6桁目が青（blue）の値です。各数値の色の強さにより様々な色を表現します。
それぞれの2桁が同じ数値の場合には3桁での表現をすることができます。例えば、#aa9933の場合#a93とすることが可能です。
透明度もHEXで指定したい場合は、8桁の数値で表現することができ、7~8桁目で同じく16進数で表現します。80%の透明度を指定したければ、#aa9933CC のように指定します。
RGBはHEXと同じく、赤（red）・緑（green）・青（blue）で色を表現することができるものです。
各値は0 ~ 255の範囲で指定することができ、rgb(赤の値, 緑の値, 青の値) のような形で表現します。
記述例）rgb(10, 50, 220)
透明度を指定したい場合には、rgba赤の値, 緑の値, 青の値, 透過度(alpha)) のような形で指定することができます。
alpha値は0~1で指定することができ、例えばrgba(0, 0, 255, .5) のような形で指定することが可能です。
HSLは「Hue（色相）」「Saturation（彩度）」「Lightness（明度）」の略です。
HSLで色を指定する場合は、この3要素で色を指定します。色相（色の種類・色合い）が決定されると、あとは彩度と明度の調整で色を決めていくことができるので、RGBより直感的に色を決めることができます。
hsl(色相, 彩度, 明度)のような形で指定することができます。
  • Hue（色相）：基本的には 0 ~ 360 の間で指定することができます。この範囲を超える数値を指定した場合は、周回して考えられる為、例えば380を指定した場合には20と同じ指定となります。
  • Saturation（彩度）：0 ~ 100% の間で指定することができます。100%に近づくほど色が鮮やかになります。逆に0%に近づくほどモノクロ（白黒）になっていきます。
  • Lightness（明度）：0 ~ 100% の間で指定することができます。100%に近づくほど明るくなります。逆に0%に近づくほど暗くなっていきます。
透明度を指定したい場合には、hslaがあります。これはrgbaと同じく最後のaがalpha（透明度）を表します。
alpha値は0~1で指定することができ、例えば hsla(80, 80%, 50%, .5) のような形で指定することが可能です。

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

このサイトについて

サイトをご利用いただき、またツールを使っていただきありがとうございます。
このサイトは、フロントエンド開発を支援するためのツールを提供しているサイトです。
フロントエンド学習を効率的に進めたい方、CSSがよく分からないけど直感的にWebサイトのデザインを変更したい方、CSSには精通しているけどもっと感覚的にデザインやアニメーションをコーディングしたい方、など向けに制作しています。

制作するツールの選定

基本的に何かのツールを制作すると決めた時に、既に同じようなものがWeb上にある場合には、そちらを使っていただいた方が良いと考えています。
ただし同じようなものであっても、もっとこういった機能が欲しいと感じるものがあったり、UIを使いやすくできるのでは無いかと感じた場合に、新たに制作しています。

サイトの仕様について

このサイトのアクセスの比率はほとんどがPCです。その為、スマホやタブレットでの閲覧にも一応対応はしていますが、PCのUIのしやすさを最優先に設計されています。
基本的にはこのサイトへのアクセスも、生成されるコードの使用シーンの想定としても、ブラウザは Chrome, Firefox, Safari, Edge などのモダンブラウザです。ベンダープレフィックスの自動付与やレガシーブラウザへの対応はしておりません。

このサイトを作った経緯

Web上には以前からたくさんのフロントエンド開発の為の素晴らしいツールが存在していました。そして、自分自身フロントエンドを学び始めた時には様々なサイトにお世話になりました。
このサイトでも扱っているような「box-shadow」「text-shadow」「transform」「linear-gradient（グラデーション）」などのジェネレーターは、特に使わせていただいたと思います。
ただ、やはり日本語のツールが少なかったり、こんな機能が欲しいというものが無い場合がありました。そんな時、日本語にも対応していて、自分の欲しい機能が搭載されているツールを作りたいと思ったのがきっかけです。
当時の自分のように、勉強をし始めた方や、直感的に自分の表現を実現したいと思っている方に届けば良いなと思います。