Photoshopいらずでオシャレな加工ができるCSSフィルターのサンプルコード12選

Web用の画像を加工する際にPhotoshopを使っている方も多くいらっしゃいますが、簡単な画像加工なら、CSSのfilterプロパティ（CSS Filter）を使うのがオススメです。

CSSフィルターを使えば、Photoshopでもおなじみの彩度、明るさ、ぼかしといった様々な画像加工が手軽にできます。しかも、数行のコードを書くだけで、動画にも使えるので便利です。

今回は、codepenに公開されているCSSフィルターのサンプルをまとめてご紹介します。
今すぐ活用できるものばかりですので、ぜひこれからの作業に取り入れてみてください。

画像加工が手軽にできるCSSフィルターサンプル

1.Grayscale Filter

http://codepen.io/grayghostvisuals/pen/cgFGm

モノクロ加工として画像編集ではおなじみのグレースケール（Grayscale）も、CSSフィルターで手軽に行うことができます。

適用すると、初期値0%から100％に近づくごとに画像が暗くなり、100％にすると画像の表示が完全なグレーになります。このとき、負の値は使用できません。

サンプルのケースではgrayscale(1)となっており、100%を指定しています。例えば50%にしたい場合は、grayscale(50%)やgrayscale(0.5)と入力します。

2.Blur Filter

http://codepen.io/grayghostvisuals/pen/Ivpto

画像をぼかしたい時には、blur（ぼかし）フィルターを使います。フィルタを適用したい割合をpx（ピクセル）で指定することでぼかしをかけることができます。
0px（初期値）がオリジナル画像で、最大が10pxです。

10pxに近づくごとにぼかしの適用割合が大きくなります。サンプルの場合、ぼかしはblur(5px)となっていますので、最大の半分程度ぼかしがかかっている状態です。

3.Sepia Filter

http://codepen.io/grayghostvisuals/pen/qezkI

セピア（Sepia）フィルターを使うと、まるで古びた写真のような色合いにしてくれます。ヴィンテージ感を出したいときに便利なフィルターです。

フィルターのかかり具合は指定した値のパーセンテージで決まります。
0%なら元画像のまま、100%に近づくにつれてセピア色に出力します。

サンプルでは100%を指定しており、画像を綺麗なセピア色に変換しています。
20%、50%に指定してわずかにセピア色にすることも可能です。

4.Material Drop Shadows

http://codepen.io/protomorph/pen/VejmVE

画像加工でよく取り入れることのあるドロップシャドウ（drop-shadow）も、CSSフィルターだけで実現することができます。
使用頻度の高いフィルターですので、覚えておいて損はありません。

フィルターを適用する際には、括弧の中に長さの値、任意で色を指定します。
効果と使い方は、CSS3のbox-shadowプロパティと似ています。ただし、指定できるのは水平、垂直方向の移動距離・サイズ・色のみとなっています。

5.CSS Filter - Hue-Rotate

http://codepen.io/designerJordan/pen/qDEjr

hue-rotate（色相回転）は色相を変更するときに使う関数です。
色相環（カラーホイール）を回転する角度を0（初期値） 〜 360[deg] の間で指定することで、オリジナル画像の色相を変更できます。

360deg、-360degを指定するとちょうど1周し、元の色と同じになります。サンプルコードではスライダーで角度が変更できるようになっていますので、実際に動かしてみたり、色相環を見てみると理解がしやすくなります。

6.CSS Filter - Brightness

http://codepen.io/designerJordan/pen/oEsAd

画像加工の定番である明るさ調整も、CSSフィルターのBrightness（明るさ）でできます。
Photoshopなどでも簡単にできる加工ですが、CSSフィルターを使えばソフトを開く手間が省けて便利です。

適用する際には、グレースケールと同様にパーセンテージで適用割合を指定します。
Brightnessフィルターでは100%がオリジナル画像の状態となり、負の値になるほど画像が暗く、正の値になるほど画像が明るくなります。

サンプルではスライダーを動かすことで画像の変化を見ることができますので、ぜひ試してみてください。

7.CSS Filter - Saturate

http://codepen.io/designerJordan/pen/yBxIe

画像の表示彩度（色の鮮やかさ）を変更したいときには、Saturate（彩度）フィルターを使います。
オリジナル画像の彩度を100%として、彩度をどのくらいの割合変更するのかを指定します。

値が100%より小さくなるほど彩度が低く、大きくなるほど彩度が高くなります。
実際にサンプルのスライダーを動かし0%にするとモノクロカラーに、999%まで上げるとビビッドな色合いに変化しました。

8.CSS Filter - Invert

http://codepen.io/designerJordan/pen/FeimD

Invert（階調反転）は、ネガ・ポジ反転ができるフィルターです。
階調を反転すると本来の色が補色に変わり、明るい部分が暗く、暗い部分が明るくなった状態になります。

初期値0%〜100%まで指定することができ、値が大きくなるほどネガっぽい画像に変化します。

9.CSS Filter - Opacity

http://codepen.io/designerJordan/pen/BazeF

画像を透過したいときには、Opacity関数を使います。0%〜100%の間で任意のパーセンテージを指定することで、画像の透過度を決めることができます。

100%がオリジナル画像の状態で、0%に近づくほど画像が透過していきます。
サンプルコードではパーセンテージを下げるほどに段々透過し、画像上に文字が浮かび上がっていくのが分かります。

10.CSS Filter - Contrast

http://codepen.io/designerJordan/pen/hBuFn

contrast（コントラスト）は、画像表示のコントラストを変更したい時に使えるフィルターです。画像内の明るい箇所、暗い箇所の調整をCSSだけで実現します。

先にご紹介したBrightness同様、コントラストを上げるだけでなく下げることも可能です。
初期値の100%を下回ればコントラストが下がり、上回ればコントラストが上がります。

100%に設定するとオリジナル画像を表示し、0%まで下げると画像は完全なグレー色になります。

11.Filter Animation

http://codepen.io/SitePoint/pen/KrXybm

CSSフィルターは複数を組み合わせて、様々な効果を再現することができます。
複数の関数を使用するときには、「filter:」に続けて適用したい順に関数を記載します。

基本的にはフィルターの順番に決まりはありませんが、場合よっては書いた順番で問題が出てくることもありますので気掛けておく必要があります。例えば、Grayscale→Sepiaの順に使用すると画像はセピアに変化しますが、逆の順序の場合にはグレースケールに変化します。

この他、CSSフィルターを使ってアニメーションを表現することも可能です。
工夫次第で色々な表現できますので、サンプルコードを参考にしてみてください。

12.CSS Filter Example — SVG

http://codepen.io/SitePoint/pen/kXGxQx

CSSには様々なフィルターが揃っていますが、場合によっては使いたいものがないこともあります。
自分が使いたいフィルターがない場合には、オリジナルを作ることが可能です。

SVGで作ったCSSフィルターをurl()フィルターで実行することができます。
サンプルでは、オリジナル画像と比較して上の画像が緑っぽく、下の画像が青っぽく変化しているのが分かります。