CSS `invert()` 関数

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2016年9月以降、すべてのブラウザーで利用可能です。

invert() は CSS の関数で、入力画像の色サンプルを反転します。結果は <filter-function> です。

試してみましょう

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

構文

css

/* 反転なし */
invert(0)

/* 完全に反転 */
invert()
invert(1)
invert(100%)

/* 60% 反転 */
invert(.6)
invert(60%)

引数

<number> or <percentage> 省略可: 変換の量を指定します。100% の値は完全に反転し、0% の値は入力値を変更しません。0% から 100% の間の値は、効果に対する線形乗数となります。補間の初期値は 0 です。デフォルト値は 1 です。

形式文法

<invert()> = 
  invert( [ <number> | <percentage> ]? )

SVG の <feComponentTransfer> フィルター要素は、中に含まれている <feFuncR>、<feFuncG>、<feFuncB> の各テーブル要素に同等の反転を生成することで、コンテンツを反転させるのにも使用できます。赤、緑、青の各フィルタープリミティブに対して同じ tableValue を設定し、同じ値にすると、<filter> の ID によって SVG 効果を参照できます。

html

<svg role="none">
  <filter id="invert90">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0" />
      <feFuncG type="table" tableValues="0.1 0" />
      <feFuncB type="table" tableValues="0.1 0" />
    </feComponentTransfer>
  </filter>
</svg>

次の宣言は同じ効果が発生します。

css

filter: invert(0.9);
filter: invert(90%);
filter: url("#invert90"); /* 埋め込まれた SVG */
filter: url("fileName.svg#invert90"); /* 外部の SVG */

例

この例では比較用に 3 つの画像を表示します。invert() フィルター関数を適用した画像、同等の SVG 関数を適用した画像、そして元の画像です。

SVG

適用対象のコンテンツを 70% 反転させる SVG フィルターを生成します。

html

<svg height="0">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.3 0" />
      <feFuncG type="table" tableValues="0.3 0" />
      <feFuncB type="table" tableValues="0.3 0" />
    </feComponentTransfer>
  </filter>
</svg>

CSS

filter または svgFilter クラスに基づいて要素を反転させる CSS を以下に示します。

css

.filter {
  filter: invert(70%);
}

.svgFilter {
  filter: url("#invert");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>invert()</code> フィルター</th>
      <th>同等の SVG フィルター</th>
      <th>元画像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="svgFilter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgInvert">
            <feComponentTransfer>
              <feFuncR type="table" tableValues="0.3 0" />
              <feFuncG type="table" tableValues="0.3 0" />
              <feFuncB type="table" tableValues="0.3 0" />
            </feComponentTransfer>
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgInvert')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

仕様書

仕様書
Filter Effects Module Level 1 # funcdef-filter-invert

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年5月8日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS invert() 関数

MDN の改良に協力

CSS `invert()` 関数