CSSで画像の明るさやぼかしを変更できるCSSフィルター「filter」

今回ご説明する、CSSのfilterプロパティはCSSで画像をの明るさやぼかしを変更できるプロパティです。

Javascriptを使って画像をぼかす方法がありますが、CSSだけでも可能です。

ぼかし「blur」

コード

.blur{
    filter: blur(4px);
    -ms-filter: blur(3px); /*IE*/
}

結果

See the Pen
css blur sample
by kura (@kuranopen)
on CodePen.

明るさ「brightness」

コントラスト「contrast」

グレースケール「grayscale」

色相変更「hue-rotate」

階調の反転「invert」

彩度「saturate」

セピア「sepia」

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note