CSSのfilterプロパティは、ぼかし、明るさ、コントラスト、色調整などの視覚効果を要素に適用します。画像、背景、動画にも機能します。画像エディタと異なり、フィルターはブラウザ内で実行されるため、どの解像度でも鮮明なまま、トランジションで滑らかにアニメーションできます。
スライダーをドラッグして1つのチェーンに複数のフィルター関数を重ねます。サンプルシーンはリアルタイムに更新され、生成されたコードはすべてを1つのfilter宣言にまとめてスタイルシートに貼り付けられます。
Frequently Asked Questions
Q: CSSフィルター関数には何がありますか？
CSSフィルター関数には何がありますか？blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()、drop-shadow()。1つのfilterプロパティに任意の数を連結できます。
Q: CSSフィルターはGPUアクセラレーションされますか？
CSSフィルターはGPUアクセラレーションされますか？はい。ほとんどのフィルター関数はGPU上で実行され、60fpsでアニメーションします。blur()とdrop-shadow()が最も重く、大きな要素では控えめに使います。
Q: filterはレイアウトに影響しますか？
filterはレイアウトに影響しますか？しません。フィルターは純粋に視覚的で、要素はドキュメントフロー内で元のサイズと位置を保ちます。サイズ変更にはtransformを使います。
Q: フィルターをアニメーションできますか？
フィルターをアニメーションできますか？はい。filterプロパティをtransitionやkeyframesでアニメーションします。同じ長さの異なるフィルターチェーン間は滑らかに補間されます。
Q: 画像をグレースケールにして、ホバーで色を付けるには？
画像をグレースケールにして、ホバーで色を付けるには？2つの状態を使います：img { filter: grayscale(100%); transition: filter .4s; } と img:hover { filter: grayscale(0); }。定番のポートフォリオパターンです。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。