| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3LETnRN8ygAGh1RoyNz9IJ2CnPY5No84yzVQCIm8e8WudTDpHAUsMeWpdDaTKHmt9H86eagrzk
x-goog-generation: 1759799731084418
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 304375
x-goog-meta-goog-reserved-file-mtime: 1759797522
x-goog-hash: crc32c=Hkc64w==, md5=XPdhWUGxPksWDQBqaWJ5XA==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Tue, 07 Oct 2025 08:43:35 GMT
cache-control: public, max-age=3600
last-modified: Tue, 07 Oct 2025 01:15:31 GMT
etag: W/"5cf7615941b13e4b160d006a6962795c"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 0b235520531bbe2c77a47391e382b516
date: Tue, 07 Oct 2025 07:43:35 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
filter - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
filter
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
* Some parts of this feature may have varying levels of support.
filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。
いくつかの関数、例えば blur() や contrast() などが利用でき、あらかじめ定義された効果を実現するのに役立てることができます。
試してみましょう
filter: url("/shared-assets/images/examples/shadow.svg#element-id");
filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%);
filter: hue-rotate(90deg);
filter: drop-shadow(16px 16px 20px red) invert(75%);
<section id="default-example">
<div class="example-container">
<img
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</div>
</section>
.example-container {
background-color: #fff;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
flex: 1;
padding: 30px;
}
構文
css
/* <filter-function> 値 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* URL */
filter: url("filters.svg#filter-id");
/* 複数のフィルター */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);
/* フィルターを使用しない */
filter: none;
/* グローバル値 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;
次のように関数と共に使用してください。
css
filter: <filter-function> [<filter-function>]* | none;
url() を使用して SVG の filter 要素を参照することができます。 SVG の <filter> 要素を参照するには、次のような構文を使用してください。
css
filter: url(file.svg#filter-element-id);
関数
filter プロパティは none または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は none を返します。特に示す場合を除いて、パーセント記号付きの値（34% など）を取る関数は、 10 進数の値（0.34 など）も受け付けます。
filter プロパティ値に複数の関数が指定されている場合、フィルターは順番通りに適用されます。
blur()-
入力画像にガウスぼかしを適用します。
cssfilter: blur(5px); brightness()-
関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。
0%の値を設定すると、完全な黒の画像が作成されます。100%の値を指定すると、入力は変更されません。100%を超える値が許されており、より明るい結果が得られます。cssfilter: brightness(2); contrast()-
入力画像のコントラストを調整します。
0%の値を指定するとグレーの画像が作成されます。100%の値を指定すると、入力画像は変更されません。100%を超える値を指定すると、コントラストを増加させます。cssfilter: contrast(200%); drop-shadow()-
引数
<shadow>を画像の輪郭に沿ってドロップシャドウとして適用します。影の構文は<box-shadow>（CSS 背景と境界モジュールで定義されています）と似ていますが、insetキーワードとspread引数は使用できません。すべてのfilterプロパティ値と同様に、drop-shadow()以降のフィルターが影に適用されます。cssfilter: drop-shadow(16px 16px 10px black); grayscale()-
画像をグレースケールに変換します。値
100%は完全にグレースケールです。初期値の0%は入力を変更しません。0%と100%の間の値は、効果に対する線形乗数です。cssfilter: grayscale(100%); hue-rotate()-
色相の角度を回転させます。
<angle>の値は、入力サンプルが調整される色相環の度数を定義します。0degの値では入力は変更されません。cssfilter: hue-rotate(90deg); invert()-
入力画像のサンプルを反転します。
100%の値を指定すると、完全に反転されます。0%では入力画像が変化しないままになります。0%と100%の間は効果の線形乗数になります。cssfilter: invert(100%); opacity()-
透過率を適用します。
0%は画像を完全に透明にし、100%は画像をそのままにします。cssfilter: opacity(50%); saturate()-
画像の彩度を設定します。
0%は完全に彩度をなくし、100%はそのまま、100%以上の値は彩度を上げます。cssfilter: saturate(200%); sepia()-
画像をセピア調にします。値を
100%にすると画像は完全にセピアになり、0%にすると何も変わりません。cssfilter: sepia(100%);
関数の組み合わせ
関数をいくつでも組み合わせてレンダリングを操作できます。フィルターは宣言順に適用されます。次の例は画像のコントラストと明るさを強調します。
css
filter: contrast(175%) brightness(103%);
補間
アニメーション時、最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 <url> を持たない場合、それぞれのフィルター関数は、その特有の規則に従って補間されます。
フィルターリストが異なる形で掲載されている場合、長い方のリストに欠けている同等のフィルター関数が、短い方のリストの終わりに追加されます。追加された関数は、フィルターを変更していない初期値を使用します。掲載されているすべてのフィルターは、フィルター関数特有の仕様に従って補間されます。それ以外の場合は離散補間を用います。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | フィルター関数のリスト |
形式文法
filter =
none |
<filter-value-list>
<filter-value-list> =
[ <filter-function> | <url> ]+
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<url> =
<url()> |
<src()>
<blur()> =
blur( <length>? )
<brightness()> =
brightness( [ <number> | <percentage> ]? )
<contrast()> =
contrast( [ <number> | <percentage> ]? )
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( [ <number> | <percentage> ]? )
<opacity()> =
opacity( [ <number> | <percentage> ]? )
<sepia()> =
sepia( [ <number> | <percentage> ]? )
<saturate()> =
saturate( [ <number> | <percentage> ]? )
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
フィルター関数の適用
filter プロパティは 2 つ目の画像に適用され、画像とその境界の両方を灰色にして不鮮明にします。
css
img {
border: 5px solid yellow;
}
/* 2 番目の画像を 40% グレー化、 5px でぼかす */
img:nth-of-type(2) {
filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="元画像はシャープ" />
<img src="pencil.jpg" alt="画像と境界は不鮮明でミュートされています。" />
繰り返しフィルター機能
フィルター機能は現れる順に適用されます。同じフィルター関数を繰り返すことができます。
css
#MDN-logo {
border: 1px solid blue;
filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
drop-shadow(5px 5px 0 red);
}
<svg
id="MDN-logo"
xmlns="https://www.w3.org/2000/svg"
viewBox="0 0 361 104.2"
xml:space="preserve"
role="img">
<title>MDN Web Docs</title>
<path
d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
style="fill: var(--text-primary);"></path>
<g style="fill:blue;">
<path
d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
</g>
</svg>
フィルターは順番に適用されます。最初のドロップシャドウの色相は hue-rotate() と関数によって変更されますが、 2 つ目のドロップシャドウの色相は変更されません。
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # FilterProperty |
ブラウザーの互換性
Loading…
関連情報
- CSS
backdrop-filterプロパティ - CSS 合成と混合モジュール（CSS の
background-blend-modeおよびmix-blend-modeプロパティを含む） - CSS の
maskプロパティ - SVG （SVG の
<filter>要素やfilter属性を含む） - HTML コンテンツへの SVG 効果の適用