diff --git a/files/en-us/web/css/filter-function/blur()/index.html b/files/en-us/web/css/filter-function/blur()/index.html
index 3744f4dde410c02..24dcc5440099aa0 100644
--- a/files/en-us/web/css/filter-function/blur()/index.html
+++ b/files/en-us/web/css/filter-function/blur()/index.html
@@ -52,17 +52,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/brightness()/index.html b/files/en-us/web/css/filter-function/brightness()/index.html
index 2d2768fe2284682..3d2322711d08457 100644
--- a/files/en-us/web/css/filter-function/brightness()/index.html
+++ b/files/en-us/web/css/filter-function/brightness()/index.html
@@ -53,17 +53,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/contrast()/index.html b/files/en-us/web/css/filter-function/contrast()/index.html
index 6d38d343bd1e225..b9a9f51088b3d7a 100644
--- a/files/en-us/web/css/filter-function/contrast()/index.html
+++ b/files/en-us/web/css/filter-function/contrast()/index.html
@@ -53,17 +53,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/drop-shadow()/index.html b/files/en-us/web/css/filter-function/drop-shadow()/index.html
index 6e9ede51d32a24e..3624c2ec4ae5c15 100644
--- a/files/en-us/web/css/filter-function/drop-shadow()/index.html
+++ b/files/en-us/web/css/filter-function/drop-shadow()/index.html
@@ -69,18 +69,22 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
  <li>CSS {{cssxref("box-shadow")}} property</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/grayscale()/index.html b/files/en-us/web/css/filter-function/grayscale()/index.html
index 815531bd556de08..9bde6a4a9d3879e 100644
--- a/files/en-us/web/css/filter-function/grayscale()/index.html
+++ b/files/en-us/web/css/filter-function/grayscale()/index.html
@@ -50,17 +50,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/hue-rotate()/index.html b/files/en-us/web/css/filter-function/hue-rotate()/index.html
index aeb03a878184985..d5ccb10aee3c250 100644
--- a/files/en-us/web/css/filter-function/hue-rotate()/index.html
+++ b/files/en-us/web/css/filter-function/hue-rotate()/index.html
@@ -55,17 +55,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/index.html b/files/en-us/web/css/filter-function/index.html
index f1cee71b7f28177..f40abe3f64a6b37 100644
--- a/files/en-us/web/css/filter-function/index.html
+++ b/files/en-us/web/css/filter-function/index.html
@@ -18,25 +18,25 @@ <h2 id="Syntax">Syntax</h2>
 <p>The <code>&lt;filter-function&gt;</code> data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.</p>
 
 <dl>
- <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dt>{{cssxref("filter-function/blur()", "blur()")}}</dt>
  <dd>Blurs the image.</dd>
- <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dt>{{cssxref("filter-function/brightness()", "brightness()")}}</dt>
  <dd>Makes the image brighter or darker.</dd>
- <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dt>{{cssxref("filter-function/contrast()", "contrast()")}}</dt>
  <dd>Increases or decreases the image's contrast.</dd>
- <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dt>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</dt>
  <dd>Applies a drop shadow behind the image.</dd>
- <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dt>{{cssxref("filter-function/grayscale()", "grayscale()")}}</dt>
  <dd>Converts the image to grayscale.</dd>
- <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt>
+ <dt>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</dt>
  <dd>Changes the overall hue of the image.</dd>
- <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dt>{{cssxref("filter-function/invert()", "invert()")}}</dt>
  <dd>Inverts the colors of the image.</dd>
- <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dt>{{cssxref("filter-function/opacity()", "opacity()")}}</dt>
  <dd>Makes the image transparent.</dd>
- <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dt>{{cssxref("filter-function/saturate()", "saturate()")}}</dt>
  <dd>Super-saturates or desaturates the input image.</dd>
- <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dt>{{cssxref("filter-function/sepia()", "sepia()")}}</dt>
  <dd>Converts the image to sepia.</dd>
 </dl>
 
@@ -202,6 +202,10 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
diff --git a/files/en-us/web/css/filter-function/invert()/index.html b/files/en-us/web/css/filter-function/invert()/index.html
index 1372679ec89a72c..686e74e54532f3d 100644
--- a/files/en-us/web/css/filter-function/invert()/index.html
+++ b/files/en-us/web/css/filter-function/invert()/index.html
@@ -52,17 +52,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/opacity()/index.html b/files/en-us/web/css/filter-function/opacity()/index.html
index e493c26f56e159c..a0db4e4a7cba758 100644
--- a/files/en-us/web/css/filter-function/opacity()/index.html
+++ b/files/en-us/web/css/filter-function/opacity()/index.html
@@ -56,18 +56,22 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
  <li>CSS {{cssxref("opacity")}} property</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/saturate()/index.html b/files/en-us/web/css/filter-function/saturate()/index.html
index 86e3f61c97ec720..05e6a61f5edc0f4 100644
--- a/files/en-us/web/css/filter-function/saturate()/index.html
+++ b/files/en-us/web/css/filter-function/saturate()/index.html
@@ -51,17 +51,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/sepia()", "sepia()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter-function/sepia()/index.html b/files/en-us/web/css/filter-function/sepia()/index.html
index 7afa06251e27746..939bc500a5e41e1 100644
--- a/files/en-us/web/css/filter-function/sepia()/index.html
+++ b/files/en-us/web/css/filter-function/sepia()/index.html
@@ -52,17 +52,21 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("filter-function/blur", "blur()")}}</li>
- <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
- <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
- <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
- <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
- <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
- <li>{{cssxref("filter-function/invert", "invert()")}}</li>
- <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
- <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/blur()", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness()", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast()", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale()", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert()", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity()", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate()", "saturate()")}}</li>
 </ul>
diff --git a/files/en-us/web/css/filter/index.html b/files/en-us/web/css/filter/index.html
index ba93f7b2043f72d..82012db8b3b8efa 100644
--- a/files/en-us/web/css/filter/index.html
+++ b/files/en-us/web/css/filter/index.html
@@ -60,7 +60,7 @@ <h2 id="Syntax">Syntax</h2>
 
 <h3 id="Interpolation">Interpolation</h3>
 
-<p>If both the beginning and end filters have a function list of the same length without {{cssxref("&lt;url&gt;")}}, each of their filter functions is interpolated according to its specific rules. If they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules. If one filter is <code>none</code>, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. Otherwise, discrete interpolation is used.</p>
+<p>If both the beginning and end filters have a function list of the same length without {{cssxref("url()","url()")}}, each of their filter functions is interpolated according to its specific rules. If they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules. If one filter is <code>none</code>, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. Otherwise, discrete interpolation is used.</p>
 
 <h2 id="Functions">Functions</h2>
 
@@ -81,7 +81,7 @@ <h3 id="Filter_functions">Filter functions</h3>
 
 <h4 id="blur">blur()</h4>
 
-<p>The {{cssxref("filter-function/blur", "blur()")}} fucntion applies a Gaussian blur to the input image. The value of <code>radius</code> defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The lacuna value for interpolation is <code>0</code>. The parameter is specified as a CSS length, but does not accept percentage values.</p>
+<p>The {{cssxref("filter-function/blur()", "blur()")}} function applies a Gaussian blur to the input image. The value of <code>radius</code> defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The lacuna value for interpolation is <code>0</code>. The parameter is specified as a CSS length, but does not accept percentage values.</p>
 
 <pre class="brush: css notranslate">filter: blur(5px)
 </pre>
@@ -169,7 +169,7 @@ <h4 id="blur">blur()</h4>
 
 <h4 id="brightness">brightness()</h4>
 
-<p>The {{cssxref("filter-function/brightness", "brightness()")}} function applies a linear multiplier to the input image, making it appear more or less bright. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over <code>100%</code> are allowed, providing brighter results. The lacuna value for interpolation is <code>1</code>.</p>
+<p>The {{cssxref("filter-function/brightness()", "brightness()")}} function applies a linear multiplier to the input image, making it appear more or less bright. A value of <code>0%</code> will create an image that is completely black. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over <code>100%</code> are allowed, providing brighter results. The lacuna value for interpolation is <code>1</code>.</p>
 
 <pre class="brush: css notranslate">filter: brightness(2)</pre>
 
@@ -262,7 +262,7 @@ <h4 id="brightness">brightness()</h4>
 
 <h4 id="contrast">contrast()</h4>
 
-<p>The {{cssxref("filter-function/contrast", "contrast()")}} function adjusts the contrast of the input image. A value of <code>0%</code> will create an image that is completely gray. A value of <code>100%</code> leaves the input unchanged. Values of an amount over <code>100%</code> are allowed, providing results with more contrast. The lacuna value for interpolation is <code>1</code>.</p>
+<p>The {{cssxref("filter-function/contrast()", "contrast()")}} function adjusts the contrast of the input image. A value of <code>0%</code> will create an image that is completely gray. A value of <code>100%</code> leaves the input unchanged. Values of an amount over <code>100%</code> are allowed, providing results with more contrast. The lacuna value for interpolation is <code>1</code>.</p>
 
 <pre class="brush: css notranslate">filter: contrast(200%)
 </pre>
@@ -357,7 +357,7 @@ <h4 id="contrast">contrast()</h4>
 
 <h4 id="drop-shadow">drop-shadow()</h4>
 
-<p>The {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} function applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <code>&lt;shadow&gt;</code> (defined in <a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a>), with the exception that the <code>inset</code> keyword and <code>spread </code>parameter are not allowed. This function is similar to the more established {{cssxref("box-shadow")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <code>&lt;shadow&gt;</code> parameter are as follows:</p>
+<p>The {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} function applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <code>&lt;shadow&gt;</code> (defined in <a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a>), with the exception that the <code>inset</code> keyword and <code>spread </code>parameter are not allowed. This function is similar to the more established {{cssxref("box-shadow")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <code>&lt;shadow&gt;</code> parameter are as follows:</p>
 
 <dl>
  <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small></dt>
@@ -505,7 +505,7 @@ <h4 id="drop-shadow">drop-shadow()</h4>
 
 <h4 id="grayscale">grayscale()</h4>
 
-<p>The {{cssxref("filter-function/grayscale", "grayscale()")}} function converts the input image to grayscale. The value of <code>amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely grayscale. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
+<p>The {{cssxref("filter-function/grayscale()", "grayscale()")}} function converts the input image to grayscale. The value of <code>amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely grayscale. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
 
 <pre class="brush: css notranslate">filter: grayscale(100%)</pre>
 
@@ -588,7 +588,7 @@ <h4 id="grayscale">grayscale()</h4>
 
 <h4 id="hue-rotate">hue-rotate()</h4>
 
-<p>The {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} function applies a hue rotation on the input image. The value of <code class="property">angle</code> defines the number of degrees around the color circle the input samples will be adjusted. A value of <code>0deg</code> leaves the input unchanged. The lacuna value for interpolation is <code>0</code>. Though there is no maximum value; the effect of values above <code>360deg</code> wraps around.</p>
+<p>The {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} function applies a hue rotation on the input image. The value of <code class="property">angle</code> defines the number of degrees around the color circle the input samples will be adjusted. A value of <code>0deg</code> leaves the input unchanged. The lacuna value for interpolation is <code>0</code>. Though there is no maximum value; the effect of values above <code>360deg</code> wraps around.</p>
 
 <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
 
@@ -674,7 +674,7 @@ <h4 id="hue-rotate">hue-rotate()</h4>
 
 <h4 id="invert">invert()</h4>
 
-<p>The {{cssxref("filter-function/invert", "invert()")}} function inverts the samples in the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely inverted. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
+<p>The {{cssxref("filter-function/invert()", "invert()")}} function inverts the samples in the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely inverted. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
 
 <pre class="brush: css notranslate">filter: invert(100%)</pre>
 
@@ -757,7 +757,7 @@ <h4 id="invert">invert()</h4>
 
 <h4 id="opacity">opacity()</h4>
 
-<p>The {{cssxref("filter-function/opacity", "opacity()")}} function applies transparency to the samples in the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>0%</code> is completely transparent. A value of <code>100%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. The lacuna value for interpolation is <code>1</code>. This function is similar to the more established {{cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.</p>
+<p>The {{cssxref("filter-function/opacity()", "opacity()")}} function applies transparency to the samples in the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>0%</code> is completely transparent. A value of <code>100%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. The lacuna value for interpolation is <code>1</code>. This function is similar to the more established {{cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.</p>
 
 <pre class="brush: css notranslate">filter: opacity(50%)</pre>
 
@@ -838,7 +838,7 @@ <h4 id="opacity">opacity()</h4>
 
 <h4 id="saturate">saturate()</h4>
 
-<p>The {{cssxref("filter-function/saturate", "saturate()")}} function saturates the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>0%</code> is completely un-saturated. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over <code>100%</code> are allowed, providing super-saturated results. The lacuna value for interpolation is <code>1</code>.</p>
+<p>The {{cssxref("filter-function/saturate()", "saturate()")}} function saturates the input image. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>0%</code> is completely un-saturated. A value of <code>100%</code> leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over <code>100%</code> are allowed, providing super-saturated results. The lacuna value for interpolation is <code>1</code>.</p>
 
 <pre class="brush: css notranslate">filter: saturate(200%)</pre>
 
@@ -918,7 +918,7 @@ <h4 id="saturate">saturate()</h4>
 
 <h4 id="sepia">sepia()</h4>
 
-<p>The {{cssxref("filter-function/sepia", "sepia()")}} function converts the input image to sepia. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely sepia. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
+<p>The {{cssxref("filter-function/sepia()", "sepia()")}} function converts the input image to sepia. The value of <code class="property">amount</code> defines the proportion of the conversion. A value of <code>100%</code> is completely sepia. A value of <code>0%</code> leaves the input unchanged. Values between <code>0%</code> and <code>100%</code> are linear multipliers on the effect. The lacuna value for interpolation is <code>0</code>.</p>
 
 <pre class="brush: css notranslate">filter: sepia(100%)</pre>