画像加工したいけれど「Photoshop」がない、すぐに手直ししたいときもありますよね。CSSの「filter」を使えば「明るさ」「ぼかし」「影」などのアレンジが値ひとつでできます。
ただしIEは適用できないため、仕様やクライアントの要望を確認の上、取り入れみてください。
画像にフィルターをかけるだけであれば、こちらの記事が役立つかもしれません。IEにも対応していますよ!
目次
brightness(明度)
filter:brightness(0.5); /* 明度 50% */ filter:brightness(80%); /* 明度 80% */
パーセンテージもしくは小数で0~指定します。数値が高いほど明るさが上がります。

blur(ぼかし)
filter:blur(3px); /* 半径 3px の範囲 */ filter:blur(3em); /* 半径 3em の範囲 */ filter:blur(3rem); /* 半径 3rem の範囲 */ filter:blur(3vw); /* 半径 3rem の範囲 */
指定できる範囲は4つあります。数値が高いほど、ぼかしの度合いが強くなります。

contrast(コントラスト)
filter:contrast(0.2); /* コントラスト率 20% */ filter:contrast(120%); /* コントラスト率 120% */
パーセンテージもしくは小数で0~指定します。数値が高いほどメリハリが出て、低いほど灰色がかった明暗の差のないコントラストとなります。

grayscale(モノクロ)
filter:grayscale(0.9); /* グレースケール率 90% */
小数で0~1まで指定できます。数値が高いほどモノクロとなり、低いほど色みがわずかに残ります。

hue-rotate(色相)
filter:hue-rotate(120deg); /* 120度の回転 */ filter:hue-rotate(-120deg); /* 240度の回転 */ filter:hue-rotate(.3turn); /* 3回転 */
角度の「deg」と回転の「turn」で色相を変更します。

invert(反転)
filter:invert(1); /* 反転率 100% */
0.6以上の指定が必要になります。0.5以下ではグレーアウト、1以下はややグレーがかります。

opacity(透明度)
filter:opacity(0.5); /* 透明度 50% */ filter:opacity(80%); /* 透明度 80% */
パーセンテージもしくは小数で0~指定します。数値が高いほど不透明度(透明の効果がない)が上がります。「filter」を使わない「opacity」プロパティも同じエフェクトが利用できます。

saturate(彩度)
filter:saturate(0.1); /* 彩度 10% */ filter:saturate(300%); /* 彩度 300% */
パーセンテージもしくは小数で0~指定します。数値が高いほど鮮やかさがアップし、低いほどグレースケールのようにモノクロになります。

sepia(セピア)
filter:sepia(0.5); /* セピア率 50% */ filter:sepia(80%); /* セピア率 80% */
パーセンテージもしくは小数で0~指定します。数値が高いほどセピア色が濃くなります。

drop-shadow(シャドウ)
filter:drop-shadow(2px 4px 6px black);
「box-shadow」と同じく影をつける効果があります。一見同じように見えますが、こちらは文字や画像(pngのみ)の場合はオブジェクトの周りに影がつきます。

box-shadow:10px 10px 10px rgba(0,0,0,0.4);
一方でbox-shadowでは文字、画像(pngを含む全て)のボックスの周りを囲むように影がつきます。

CSSプロパティの「filter」があれば、Photoshopで編集したような効果を簡単に再現することができます。「明るさ」や「ぼかし」は見出しとの組み合わせに、「セピア」や「モノクロ」などを取り入れてモダンなサイトに、と活かせるシーンはさまざまです。
この他に「initial」「inherit」「unset」の値がありますが、こちらは初期値となるため変化はありません。「none」のようにエフェクトを解除するときに使いましょう。