Front-endTools

CSS Filter ジェネレーター

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

.original-css-filter {
  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プロパティの説明

filter

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」は、要素の透過度を指定します。0%の値を指定すると、完全に透明になります。100%では変化がありません。CSSのopacityプロパティと結果は同じですが、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。

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

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

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