【 更新 】おすすめ記事はこちら

CSS

【CSS】明るさ・ぼかし・影フィルター（filter）で画像加工する

画像加工したいけれど「Photoshop」がない、すぐに手直ししたいときもありますよね。CSSの「filter」を使えば「明るさ」「ぼかし」「影」などのアレンジが値ひとつでできます。

ただしIEは適用できないため、仕様やクライアントの要望を確認の上、取り入れみてください。

画像にフィルターをかけるだけであれば、こちらの記事が役立つかもしれません。IEにも対応していますよ！

関連記事【CSS】IEに対応！画像に半透明のフィルターをかけて文字を重ねる

brightness（明度）

filter:brightness(0.5); /* 明度 50% */
filter:brightness(80%); /* 明度 80% */

パーセンテージもしくは小数で0～指定します。数値が高いほど明るさが上がります。

brightness（明度）の例

blur（ぼかし）

filter:blur(3px); /* 半径 3px の範囲 */
filter:blur(3em); /* 半径 3em の範囲 */
filter:blur(3rem); /* 半径 3rem の範囲 */
filter:blur(3vw); /* 半径 3rem の範囲 */

指定できる範囲は4つあります。数値が高いほど、ぼかしの度合いが強くなります。

blur（ぼかし）の例

contrast（コントラスト）

filter:contrast(0.2); /* コントラスト率 20% */
filter:contrast(120%); /* コントラスト率 120% */

パーセンテージもしくは小数で0～指定します。数値が高いほどメリハリが出て、低いほど灰色がかった明暗の差のないコントラストとなります。

contrast（コントラスト）の例

grayscale（モノクロ）

filter:grayscale(0.9); /* グレースケール率 90% */

小数で0～１まで指定できます。数値が高いほどモノクロとなり、低いほど色みがわずかに残ります。

grayscale（モノクロ）の例

hue-rotate（色相）

filter:hue-rotate(120deg); /* 120度の回転 */
filter:hue-rotate(-120deg); /* 240度の回転 */
filter:hue-rotate(.3turn); /* 3回転 */

角度の「deg」と回転の「turn」で色相を変更します。

hue-rotate（色相）の例

invert（反転）

filter:invert(1); /* 反転率 100% */

0.6以上の指定が必要になります。0.5以下ではグレーアウト、1以下はややグレーがかります。

invert（反転）の例

opacity（透明度）

filter:opacity(0.5); /* 透明度 50% */
filter:opacity(80%); /* 透明度 80% */

パーセンテージもしくは小数で0～指定します。数値が高いほど不透明度（透明の効果がない）が上がります。「filter」を使わない「opacity」プロパティも同じエフェクトが利用できます。

opacity（透明度）の例

saturate（彩度）

filter:saturate(0.1); /* 彩度 10% */
filter:saturate(300%); /* 彩度 300% */

パーセンテージもしくは小数で0～指定します。数値が高いほど鮮やかさがアップし、低いほどグレースケールのようにモノクロになります。

saturate（彩度）の例

sepia（セピア）

filter:sepia(0.5); /* セピア率 50% */
filter:sepia(80%); /* セピア率 80% */

パーセンテージもしくは小数で0～指定します。数値が高いほどセピア色が濃くなります。

sepia（セピア）の例

drop-shadow（シャドウ）

filter:drop-shadow(2px 4px 6px black);

「box-shadow」と同じく影をつける効果があります。一見同じように見えますが、こちらは文字や画像（pngのみ）の場合はオブジェクトの周りに影がつきます。

drop-shadow（シャドウ）の例
box-shadow:10px 10px 10px rgba(0,0,0,0.4);

一方でbox-shadowでは文字、画像（pngを含む全て）のボックスの周りを囲むように影がつきます。

CSSプロパティの「filter」があれば、Photoshopで編集したような効果を簡単に再現することができます。「明るさ」や「ぼかし」は見出しとの組み合わせに、「セピア」や「モノクロ」などを取り入れてモダンなサイトに、と活かせるシーンはさまざまです。

この他に「initial」「inherit」「unset」の値がありますが、こちらは初期値となるため変化はありません。「none」のようにエフェクトを解除するときに使いましょう。