CSS Filter ジェネレーター

画像や要素にエフェクトを簡単に実装できる、filterのツールです。
ぼかし・明るさ・コントラスト・グレースケール・色相回転・反転・彩度・セピアなどを複数指定することができます!

.original-css-filter {
  filter: none;
}

スタイルエディター

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

その他の指定

各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画像には、透過されていない部分に沿った影を生成します。影は複数指定することも可能です。

ジェネレーターの一覧

その他ツールの一覧