diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md
index b4e4b5d3d4ab807..5230ae8d7f42438 100644
--- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -62,13 +62,13 @@ article {
   background-color: red;
   background-image: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.25)
+    rgb(0 0 0 / 0%),
+    rgb(0 0 0 / 25%)
   );
 }
 
 .simple {
-  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
+  box-shadow: 5px 5px 5px rgb(0 0 0 / 70%);
 }
 ```
 
@@ -109,8 +109,8 @@ article {
   background-color: red;
   background-image: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.25)
+    rgb(0 0 0 / 0%),
+    rgb(0 0 0 / 25%)
   );
 }
 
@@ -150,8 +150,8 @@ button {
   background-image: linear-gradient(to bottom right, #777, #ddd);
   box-shadow:
     1px 1px 1px black,
-    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
-    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
+    inset 2px 3px 5px rgb(0 0 0 / 30%),
+    inset -2px -3px 5px rgb(255 255 255 / 50%);
 }
 
 button:focus,
@@ -162,8 +162,8 @@ button:hover {
 button:active {
   box-shadow:
     inset 2px 2px 1px black,
-    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
-    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
+    inset 2px 3px 5px rgb(0 0 0 / 30%),
+    inset -2px -3px 5px rgb(255 255 255 / 50%);
 }
 ```
 
diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
index 9fbccac44ec96f6..f91143587549860 100644
--- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -44,8 +44,8 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr
   background:
     linear-gradient(
         105deg,
-        rgba(255, 255, 255, 0.2) 39%,
-        rgba(51, 56, 57, 1) 96%
+        rgb(255 255 255 / 20%) 39%,
+        rgb(51 56 57 / 100%) 96%
       ) center center / 400px 200px no-repeat,
     url(big-star.png) center no-repeat,
     rebeccapurple;
diff --git a/files/en-us/learn/css/building_blocks/styling_tables/index.md b/files/en-us/learn/css/building_blocks/styling_tables/index.md
index 66a81f2110cf64d..bac3665969385c7 100644
--- a/files/en-us/learn/css/building_blocks/styling_tables/index.md
+++ b/files/en-us/learn/css/building_blocks/styling_tables/index.md
@@ -221,11 +221,7 @@ tfoot {
 thead th,
 tfoot th,
 tfoot td {
-  background: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.5)
-  );
+  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
   border: 3px solid purple;
 }
 ```
diff --git a/files/en-us/learn/css/building_blocks/values_and_units/index.md b/files/en-us/learn/css/building_blocks/values_and_units/index.md
index 2f8dc141acd05d6..e605c0ecf94656f 100644
--- a/files/en-us/learn/css/building_blocks/values_and_units/index.md
+++ b/files/en-us/learn/css/building_blocks/values_and_units/index.md
@@ -57,7 +57,7 @@ In the following example, we have set the color of our heading using a keyword,
 ```css
 h1 {
   color: black;
-  background-color: rgb(197, 93, 161);
+  background-color: rgb(197 93 161);
 }
 ```
 
@@ -383,7 +383,7 @@ These values are less intuitive than keywords for defining colors, but they are
 
 **Again, try changing the values to see how the colors vary.**
 
-### RGB and RGBA values
+### RGB values
 
 To create RGB values directly, the `rgb()` function takes three parameters representing **red**, **green**, and **blue** channel values of the colors, with an optional fourth value separated by a slash ('/') representing opacity, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 or a percent between 0% and 100% inclusive (but not a mixture of the two).
 
diff --git a/files/en-us/learn/css/css_layout/floats/index.md b/files/en-us/learn/css/css_layout/floats/index.md
index 7ad52a52a4b0b46..9c0a347c90352a0 100644
--- a/files/en-us/learn/css/css_layout/floats/index.md
+++ b/files/en-us/learn/css/css_layout/floats/index.md
@@ -95,7 +95,7 @@ body {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -145,7 +145,7 @@ To float the box, add the {{cssxref("float")}} and {{cssxref("margin-right")}} p
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -166,7 +166,7 @@ Add a class of `special` to the first paragraph of text, the one immediately fol
 
 ```css
 .special {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -223,7 +223,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -293,12 +293,12 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 
 .special {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -341,7 +341,7 @@ In your CSS, add the following rule for the `.wrapper` class and then reload the
 
 ```css live-sample___the_problem
 .wrapper {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -395,7 +395,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   color: black;
 }
@@ -411,7 +411,7 @@ To solve this problem is to use the value `flow-root` of the `display` property.
 
 ```css
 .wrapper {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
   display: flow-root;
@@ -467,7 +467,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   color: black;
 }
diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md
index 9008f6bbd03ff91..8c868b92df57e77 100644
--- a/files/en-us/learn/css/css_layout/grids/index.md
+++ b/files/en-us/learn/css/css_layout/grids/index.md
@@ -85,8 +85,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -142,8 +142,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -195,8 +195,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -264,8 +264,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -329,8 +329,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -423,8 +423,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {
@@ -525,8 +525,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {
@@ -663,8 +663,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 header {
   grid-area: header;
@@ -700,7 +700,7 @@ footer {
 
 article {
   padding: 10px;
-  border: 2px solid rgb(79, 185, 227);
+  border: 2px solid rgb(79 185 227);
   border-radius: 5px;
 }
 ```
@@ -726,8 +726,8 @@ body {
 .container div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -818,8 +818,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {
diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md
index 7525d66960fa742..96f0c70d17cdcb6 100644
--- a/files/en-us/learn/css/css_layout/introduction/index.md
+++ b/files/en-us/learn/css/css_layout/introduction/index.md
@@ -103,7 +103,7 @@ However, if we add `display: flex` to the parent, the three items now arrange th
 }
 .wrapper > div {
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -136,7 +136,7 @@ As a simple example, we can add the {{cssxref("flex")}} property to all of our c
 }
 .wrapper > div {
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -178,7 +178,7 @@ Similar to flexbox, we enable Grid Layout with its specific display value — `d
 
 .wrapper > div {
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -216,7 +216,7 @@ Once you have a grid, you can explicitly place your items on it, rather than rel
 
 .wrapper > div {
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -285,8 +285,8 @@ p {
 }
 
 .box {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   border-radius: 5px;
 }
@@ -358,8 +358,8 @@ body {
 }
 
 p {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -368,8 +368,8 @@ p {
 
 ```css hidden
 .positioned {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
 }
 ```
 
@@ -408,8 +408,8 @@ body {
 }
 
 p {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -419,8 +419,8 @@ p {
 ```css hidden
 .positioned {
   position: relative;
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
   top: 30px;
   left: 30px;
 }
@@ -459,8 +459,8 @@ body {
 }
 
 p {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -469,8 +469,8 @@ p {
 
 ```css hidden
 .positioned {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
 }
 ```
 
@@ -517,8 +517,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -586,8 +586,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
diff --git a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md
index 88d3102c90952f1..aa5d87e47b1c993 100644
--- a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md
@@ -208,7 +208,7 @@ Our next step is to create a rule for the class `.col`, floating it left, giving
   float: left;
   margin-left: 20px;
   width: 60px;
-  background: rgb(255, 150, 150);
+  background: rgb(255 150 150);
 }
 ```
 
@@ -327,7 +327,7 @@ Next, update the fourth CSS rule (with the `.col` selector) like so:
   float: left;
   margin-left: 2.08333333%;
   width: 6.25%;
-  background: rgb(255, 150, 150);
+  background: rgb(255 150 150);
 }
 ```
 
@@ -524,7 +524,7 @@ body {
   margin-bottom: 1em;
   width: 6.25%;
   flex: 1 1 auto;
-  background: rgb(255, 150, 150);
+  background: rgb(255 150 150);
 }
 ```
 
diff --git a/files/en-us/learn/css/css_layout/media_queries/index.md b/files/en-us/learn/css/css_layout/media_queries/index.md
index 93fec6ea8b22d1e..ecbeca69288b755 100644
--- a/files/en-us/learn/css/css_layout/media_queries/index.md
+++ b/files/en-us/learn/css/css_layout/media_queries/index.md
@@ -239,8 +239,8 @@ aside ul {
 
 nav a:link,
 nav a:visited {
-  background-color: rgba(207, 232, 220, 0.2);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220 / 20%);
+  border: 2px solid rgb(79 185 227);
   text-decoration: none;
   display: block;
   padding: 10px;
@@ -249,17 +249,17 @@ nav a:visited {
 }
 
 nav a:hover {
-  background-color: rgba(207, 232, 220, 0.7);
+  background-color: rgb(207 232 220 / 70%);
 }
 
 .related {
-  background-color: rgba(79, 185, 227, 0.3);
-  border: 1px solid rgb(79, 185, 227);
+  background-color: rgb(79 185 227 / 30%);
+  border: 1px solid rgb(79 185 227);
   padding: 10px;
 }
 
 .sidebar {
-  background-color: rgba(207, 232, 220, 0.5);
+  background-color: rgb(207 232 220 / 50%);
   padding: 10px;
 }
 
diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md
index 73884f55cde7d06..6a88e2717e9ec51 100644
--- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md
@@ -161,7 +161,7 @@ Now add a rule between the columns with `column-rule`. In a similar way to the {
 .container {
   column-count: 3;
   column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
+  column-rule: 4px dotted rgb(79 185 227);
 }
 ```
 
@@ -231,11 +231,11 @@ body {
 .container {
   column-count: 3;
   column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
+  column-rule: 4px dotted rgb(79 185 227);
 }
 h2 {
   column-span: all;
-  background-color: rgb(79, 185, 227);
+  background-color: rgb(79 185 227);
   color: white;
   padding: 0.5em;
 }
@@ -369,8 +369,8 @@ body {
 }
 
 .card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   margin: 0 0 1em 0;
 }
@@ -385,8 +385,8 @@ To control this behavior, we can use properties from the [CSS Fragmentation](/en
 ```css
 .card {
   break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
   padding: 10px;
   margin: 0 0 1em 0;
 }
diff --git a/files/en-us/learn/css/css_layout/normal_flow/index.md b/files/en-us/learn/css/css_layout/normal_flow/index.md
index 94cd87ad6a7c9b3..1a3299ccacbdb9b 100644
--- a/files/en-us/learn/css/css_layout/normal_flow/index.md
+++ b/files/en-us/learn/css/css_layout/normal_flow/index.md
@@ -89,8 +89,8 @@ body {
 }
 
 p {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
   padding: 10px;
   margin: 10px;
 }
diff --git a/files/en-us/learn/css/css_layout/positioning/index.md b/files/en-us/learn/css/css_layout/positioning/index.md
index a32dae04bef22fb..267d717a654e168 100644
--- a/files/en-us/learn/css/css_layout/positioning/index.md
+++ b/files/en-us/learn/css/css_layout/positioning/index.md
@@ -553,8 +553,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255, 84, 104, 0.3);
-  border: 2px solid rgb(255, 84, 104);
+  background: rgb(255 84 104 / 30%);
+  border: 2px solid rgb(255 84 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
diff --git a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md
index af58b253d213bea..278479239bacf04 100644
--- a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md
@@ -71,7 +71,7 @@ In the example below, we have floated three `<div>`s so they display in a row. A
 }
 
 .wrapper {
-  background-color: rgb(79, 185, 227);
+  background-color: rgb(79 185 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -81,7 +81,7 @@ In the example below, we have floated three `<div>`s so they display in a row. A
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -121,7 +121,7 @@ In the floated layout, the percentage is calculated from the container — 33.33
 }
 
 .wrapper {
-  background-color: rgb(79, 185, 227);
+  background-color: rgb(79 185 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -131,7 +131,7 @@ In the floated layout, the percentage is calculated from the container — 33.33
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   width: 33.333%;
 }
@@ -161,7 +161,7 @@ If we add a feature query to the above example, we can use it to set the widths
 }
 
 .wrapper {
-  background-color: rgb(79, 185, 227);
+  background-color: rgb(79 185 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -171,7 +171,7 @@ If we add a feature query to the above example, we can use it to set the widths
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   width: 33.333%;
 }
diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
index 613e9ac0e753aed..15d018ef9e6ad54 100644
--- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
@@ -101,18 +101,18 @@ Okay, let's have fun with backgrounds:
      As you will notice, color gradients are
      considered to be images and can be
      manipulated as such */
-  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+  background-image: linear-gradient(175deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgb(0 0 0 / 0%) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgb(0 0 0 / 0%) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgb(0 0 0 / 0%) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgb(0 0 0 / 0%) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgb(0 0 0 / 0%) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgb(0 0 0 / 0%) 80%, #74a6ae 80%);
 }
 ```
 
diff --git a/files/en-us/learn/css/howto/make_box_transparent/index.md b/files/en-us/learn/css/howto/make_box_transparent/index.md
index 998437c1d85de61..d92e30b99a1d0c5 100644
--- a/files/en-us/learn/css/howto/make_box_transparent/index.md
+++ b/files/en-us/learn/css/howto/make_box_transparent/index.md
@@ -16,7 +16,7 @@ Using a value of `0` would make the box completely transparent, and values betwe
 
 ## Changing the opacity of the background color only
 
-In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a color value which has an alpha channel—such as [rgba](/en-US/docs/Web/CSS/color_value#rgb_color_model). As with `opacity`, a value of `1` for the alpha channel value makes the color fully opaque. Therefore `background-color: rgba(0,0,0,.5);` will set the background color to 50% opacity.
+In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a [`<color>`](/en-US/docs/Web/CSS/color_value) value that has an alpha channel, such as `rgb()`. As with `opacity`, a value of `1` for the alpha channel value makes the color fully opaque. Therefore, `background-color: rgb(0 0 0 / 50%);` will set the background color to 50% opacity.
 
 Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box.
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md
index ec53b076fcd534f..ea3e6728b61a8ac 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_1/index.md
@@ -68,7 +68,7 @@ This is the first example of code that explains [how to build a custom form widg
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -118,7 +118,7 @@ This is the first example of code that explains [how to build a custom form widg
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -204,7 +204,7 @@ This is the first example of code that explains [how to build a custom form widg
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -254,7 +254,7 @@ This is the first example of code that explains [how to build a custom form widg
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -340,7 +340,7 @@ This is the first example of code that explains [how to build a custom form widg
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -390,7 +390,7 @@ This is the first example of code that explains [how to build a custom form widg
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md
index 0821f14dec6b103..a78cd60a5f19248 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_2/index.md
@@ -86,7 +86,7 @@ This is the second example that explain [how to build custom form widgets](/en-U
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -136,7 +136,7 @@ This is the second example that explain [how to build custom form widgets](/en-U
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md
index 3b9e89387e59933..844236edc74737e 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md
@@ -86,7 +86,7 @@ This is the third example that explain [how to build custom form widgets](/en-US
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -136,7 +136,7 @@ This is the third example that explain [how to build custom form widgets](/en-US
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md
index e2d3bce9d4073d6..eeae3ad95bbac9d 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_4/index.md
@@ -86,7 +86,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -136,7 +136,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md
index 0c552b6372b400f..cb0e19800771929 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_5/index.md
@@ -86,7 +86,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -136,7 +136,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
index 08b4d0760f38331..27555569022dbc2 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
@@ -189,7 +189,7 @@ So now that we have the basic functionality in place, the fun can start. The fol
 
   border: 0.2em solid #000;
   border-radius: 0.4em;
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 
   /* The first declaration is for browsers that do not support linear gradients. */
   background: #f0f0f0;
@@ -262,7 +262,7 @@ Next, let's style the list of options:
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
   background: #f0f0f0;
 }
 ```
@@ -332,7 +332,7 @@ So here's the result with our three states ([check out the source code here](/en
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -382,7 +382,7 @@ So here's the result with our three states ([check out the source code here](/en
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -454,7 +454,7 @@ So here's the result with our three states ([check out the source code here](/en
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -504,7 +504,7 @@ So here's the result with our three states ([check out the source code here](/en
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -576,7 +576,7 @@ So here's the result with our three states ([check out the source code here](/en
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -626,7 +626,7 @@ So here's the result with our three states ([check out the source code here](/en
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -835,7 +835,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -885,7 +885,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -1132,7 +1132,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -1182,7 +1182,7 @@ Check out the [full source code](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -1453,7 +1453,7 @@ Check out the [source code here](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -1503,7 +1503,7 @@ Check out the [source code here](/en-US/docs/Learn/Forms/How_to_build_custom_for
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -1778,7 +1778,7 @@ Check out the [full source code here](/en-US/docs/Learn/Forms/How_to_build_custo
   border: 0.2em solid #000; /* 2px */
   border-radius: 0.4em; /* 4px */
 
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
   background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
@@ -1828,7 +1828,7 @@ Check out the [full source code here](/en-US/docs/Learn/Forms/How_to_build_custo
   border-top-width: 0.1em;
   border-radius: 0 0 0.4em 0.4em;
 
-  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.2em 0.4em rgb(0 0 0 / 40%);
 
   box-sizing: border-box;
 
@@ -2042,7 +2042,7 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to
 .styledSelect:not(:focus-within) input:checked + label {
   border: 0.2em solid #000;
   border-radius: 0.4em;
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 }
 .styledSelect:not(:focus-within) input:checked + label::after {
   content: "▼";
@@ -2055,7 +2055,7 @@ We'll do a little styling of the radio button list (not the legend/fieldset) to
 .styledSelect:focus-within {
   border: 0.2em solid #000;
   border-radius: 0.4em;
-  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45);
+  box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 }
 .styledSelect:focus-within input:checked + label {
   background-color: #333;
diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md
index 4ec51ce5ef53ea4..f14329e437988a9 100644
--- a/files/en-us/learn/forms/styling_web_forms/index.md
+++ b/files/en-us/learn/forms/styling_web_forms/index.md
@@ -309,7 +309,7 @@ When one of these fields gains focus, we highlight them with a light grey, trans
 ```css
 input:focus,
 textarea:focus {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
   border-radius: 5px;
 }
 ```
diff --git a/files/en-us/learn/javascript/building_blocks/functions/index.md b/files/en-us/learn/javascript/building_blocks/functions/index.md
index 926179c794166b9..dad46d2d39a38d6 100644
--- a/files/en-us/learn/javascript/building_blocks/functions/index.md
+++ b/files/en-us/learn/javascript/building_blocks/functions/index.md
@@ -89,7 +89,7 @@ function draw() {
   ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,0.5)";
+    ctx.fillStyle = "rgb(255 0 0 / 50%)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
diff --git a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
index bc1315116e11571..9b044505f10d119 100644
--- a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
@@ -101,8 +101,8 @@ Alternatively, you can add one event listener to the thumb bar.
 That just leaves our darken/lighten `<button>` — we've already provided a line that stores a reference to the `<button>` in a constant called `btn`. You need to add a click event listener that:
 
 1. Checks the current class name set on the `<button>` — you can again achieve this by using `getAttribute()`.
-2. If the class name is `"dark"`, changes the `<button>` class to `"light"` (using [`setAttribute()`](/en-US/docs/Web/API/Element/setAttribute)), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay `<div>` to `"rgba(0,0,0,0.5)"`.
-3. If the class name is not `"dark"`, changes the `<button>` class to `"dark"`, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay `<div>` to `"rgba(0,0,0,0)"`.
+2. If the class name is `"dark"`, changes the `<button>` class to `"light"` (using [`setAttribute()`](/en-US/docs/Web/API/Element/setAttribute)), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay `<div>` to `"rgb(0 0 0 / 50%)"`.
+3. If the class name is not `"dark"`, changes the `<button>` class to `"dark"`, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay `<div>` to `"rgb(0 0 0 / 0%)"`.
 
 The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.
 
diff --git a/files/en-us/learn/javascript/building_blocks/looping_code/index.md b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
index f974c6f2c81950c..bbb7169d1ee8808 100644
--- a/files/en-us/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
@@ -82,7 +82,7 @@ function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,0.5)";
+    ctx.fillStyle = "rgb(255 0 0 / 50%)";
     ctx.arc(
       random(canvas.width),
       random(canvas.height),
@@ -104,7 +104,7 @@ You don't have to understand all the code for now, but let's look at the part of
 ```js
 for (let i = 0; i < 100; i++) {
   ctx.beginPath();
-  ctx.fillStyle = "rgba(255,0,0,0.5)";
+  ctx.fillStyle = "rgb(255 0 0 / 50%)";
   ctx.arc(
     random(canvas.width),
     random(canvas.height),
@@ -126,7 +126,7 @@ If we weren't using a loop here, we'd have to repeat the following code for ever
 
 ```js
 ctx.beginPath();
-ctx.fillStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgb(255 0 0 / 50%)";
 ctx.arc(
   random(canvas.width),
   random(canvas.height),
diff --git a/files/en-us/learn/javascript/building_blocks/return_values/index.md b/files/en-us/learn/javascript/building_blocks/return_values/index.md
index 17abfdba8e3268d..a0171d862bde804 100644
--- a/files/en-us/learn/javascript/building_blocks/return_values/index.md
+++ b/files/en-us/learn/javascript/building_blocks/return_values/index.md
@@ -70,7 +70,7 @@ function draw() {
   ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,0.5)";
+    ctx.fillStyle = "rgb(255 0 0 / 50%)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index d620802af12ffb3..c0a7c66f8d79a5a 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -163,10 +163,10 @@ Let's start with some simple rectangles.
 
    Save and refresh, and you'll see your new rectangle. This raises an important point: graphics operations like drawing rectangles, lines, and so forth are performed in the order in which they occur. Think of it like painting a wall, where each coat of paint overlaps and may even hide what's underneath. You can't do anything to change this, so you have to think carefully about the order in which you draw the graphics.
 
-4. Note that you can draw semi-transparent graphics by specifying a semi-transparent color, for example by using `rgba()`. The `a` value defines what's called the "alpha channel, " or the amount of transparency the color has. The higher its value, the more it will obscure whatever's behind it. Add the following to your code:
+4. Note that you can draw semi-transparent graphics by specifying a semi-transparent color, for example by using `rgb()`. The "alpha channel" defines the amount of transparency the color has. The higher its value, the more it will obscure whatever's behind it. Add the following to your code:
 
    ```js
-   ctx.fillStyle = "rgba(255, 0, 255, 0.75)";
+   ctx.fillStyle = "rgb(255 0 255 / 75%)";
    ctx.fillRect(25, 100, 175, 50);
    ```
 
@@ -435,7 +435,7 @@ Let's build a simple example.
 4. The idea here is that we'll draw something on the canvas inside the `for` loop, and iterate on it each time so we can create something interesting. Add the following code inside your `for` loop:
 
    ```js
-   ctx.fillStyle = `rgba(${255 - length},0,${255 - length},0.9)`;
+   ctx.fillStyle = `rgb(${255 - length} 0 ${255 - length} / 90%)`;
    ctx.beginPath();
    ctx.moveTo(moveOffset, moveOffset);
    ctx.lineTo(moveOffset + length, moveOffset);
@@ -486,7 +486,7 @@ To see how it works, let's quickly look again at our Bouncing Balls example ([se
 
 ```js
 function loop() {
-  ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.fillStyle = "rgb(0 0 0 / 25%)";
   ctx.fillRect(0, 0, width, height);
 
   for (const ball of balls) {
diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 8d3c3e2ea95980c..cac98549f9aaafc 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -186,7 +186,7 @@ Last but not least, let's look at the CSS for the timer:
 
 .timer div {
   position: absolute;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgb(255 255 255 / 20%);
   left: 0;
   top: 0;
   width: 0;
diff --git a/files/en-us/learn/javascript/objects/object_building_practice/index.md b/files/en-us/learn/javascript/objects/object_building_practice/index.md
index 630cd3511b31d04..572c2d45d9695d2 100644
--- a/files/en-us/learn/javascript/objects/object_building_practice/index.md
+++ b/files/en-us/learn/javascript/objects/object_building_practice/index.md
@@ -226,7 +226,7 @@ Next, add the following to the bottom of your code:
 
 ```js
 function loop() {
-  ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.fillStyle = "rgb(0 0 0 / 25%)";
   ctx.fillRect(0, 0, width, height);
 
   for (const ball of balls) {
@@ -240,7 +240,7 @@ function loop() {
 
 All programs that animate things generally involve an animation loop, which serves to update the information in the program and then render the resulting view on each frame of the animation; this is the basis for most games and other such programs. Our `loop()` function does the following:
 
-- Sets the canvas fill color to semi-transparent black, then draws a rectangle of the color across the whole width and height of the canvas, using `fillRect()` (the four parameters provide a start coordinate, and a width and height for the rectangle drawn). This serves to cover up the previous frame's drawing before the next one is drawn. If you don't do this, you'll just see long snakes worming their way around the canvas instead of balls moving! The color of the fill is set to semi-transparent, `rgba(0,0,0,0.25)`, to allow the previous few frames to shine through slightly, producing the little trails behind the balls as they move. If you changed 0.25 to 1, you won't see them at all any more. Try varying this number to see the effect it has.
+- Sets the canvas fill color to semi-transparent black, then draws a rectangle of the color across the whole width and height of the canvas, using `fillRect()` (the four parameters provide a start coordinate, and a width and height for the rectangle drawn). This serves to cover up the previous frame's drawing before the next one is drawn. If you don't do this, you'll just see long snakes worming their way around the canvas instead of balls moving! The color of the fill is set to semi-transparent, `rgb(0 0 0 / 25%)`, to allow the previous few frames to shine through slightly, producing the little trails behind the balls as they move. If you changed 0.25 to 1, you won't see them at all any more. Try varying this number to see the effect it has.
 - Loops through all the balls in the `balls` array, and runs each ball's `draw()` and `update()` function to draw each one on the screen, then do the necessary updates to position and velocity in time for the next frame.
 - Runs the function again using the `requestAnimationFrame()` method — when this method is repeatedly run and passed the same function name, it runs that function a set number of times per second to create a smooth animation. This is generally done recursively — which means that the function is calling itself every time it runs, so it runs over and over again.
 
@@ -285,7 +285,7 @@ You also need to call this method in each frame of the animation. Update your `l
 
 ```js
 function loop() {
-  ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.fillStyle = "rgb(0 0 0 / 25%)";
   ctx.fillRect(0, 0, width, height);
 
   for (const ball of balls) {
diff --git a/files/en-us/learn/performance/javascript/index.md b/files/en-us/learn/performance/javascript/index.md
index 99f0462772399af..ac336ff6a4f6e52 100644
--- a/files/en-us/learn/performance/javascript/index.md
+++ b/files/en-us/learn/performance/javascript/index.md
@@ -243,7 +243,7 @@ For animations that can't be handled in JavaScript, for example, animating an HT
 ```js
 function loop() {
   // Clear the canvas before drawing the next frame of the animation
-  ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
+  ctx.fillStyle = "rgb(0 0 0 / 25%)";
   ctx.fillRect(0, 0, width, height);
 
   // Draw objects on the canvas and update their positioning data
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md
index 24d5b3aeb99cf27..ab0e3cb26402e54 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md
@@ -115,8 +115,8 @@ In `app.component.css`, add the following styles:
   padding: 1rem;
   text-align: center;
   box-shadow:
-    0 2px 4px 0 rgba(0, 0, 0, 0.2),
-    0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+    0 2px 4px 0 rgb(0 0 0 / 20%),
+    0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
 }
 
 @media screen and (min-width: 600px) {
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index d874693dc702fd6..472b72de752d5eb 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -409,8 +409,8 @@ body {
   padding: 1rem;
   position: relative;
   box-shadow:
-    0 2px 4px 0 rgba(0, 0, 0, 0.2),
-    0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+    0 2px 4px 0 rgb(0 0 0 / 20%),
+    0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
 }
 @media screen and (min-width: 550px) {
   .todoapp {
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index bf8ba02360ddccd..0dc1b83db88cc28 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -548,8 +548,8 @@ body {
   padding: 1rem;
   position: relative;
   box-shadow:
-    0 2px 4px 0 rgba(0, 0, 0, 0.2),
-    0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+    0 2px 4px 0 rgb(0 0 0 / 20%),
+    0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
 }
 @media screen and (min-width: 550px) {
   .todoapp {
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
index f2324170bc21938..9fd50998882517c 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
@@ -255,8 +255,8 @@ Update your `App.vue` file's `<style>` element so it looks like so:
     padding-top: 0;
     position: relative;
     box-shadow:
-      0 2px 4px 0 rgba(0, 0, 0, 0.2),
-      0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+      0 2px 4px 0 rgb(0 0 0 / 20%),
+      0 2.5rem 5rem 0 rgb(0 0 0 / 10%);
   }
   @media screen and (min-width: 550px) {
     #app {
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 0724e5150a18b78..85507a6f7d7c60f 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -181,11 +181,11 @@ button:active {
 }
 ```
 
-Here we are providing an [RGBA](/en-US/docs/Web/CSS/color_value/rgb) {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. While now fully supported, RGBA colors and box shadows haven't been around forever; starting in IE9. Browsers that didn't support RGBA colors would ignore the declaration meaning in old browsers the background just wouldn't show up at all so the text would be unreadable, no good at all!
+Here we are providing an [RGB](/en-US/docs/Web/CSS/color_value/rgb) {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. While now fully supported, RGB colors and box shadows haven't been around forever; starting in IE9. Browsers that didn't support RGB colors would ignore the declaration meaning in old browsers the background just wouldn't show up at all so the text would be unreadable, no good at all!
 
 ![Hard to see pill button with white text on an almost white background](unreadable-button.png)
 
-To sort this out, we have added a second `background-color` declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first `background-color` value; when it gets to the second `background-color` declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.
+To sort this out, we have added a second `background-color` declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first `background-color` value; when it gets to the second `background-color` declaration, it will override the initial value with this value if it supports RGB colors. If not, it will just ignore the entire declaration and move on.
 
 > **Note:** The same is true for other CSS features like [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), [`@font-face`](/en-US/docs/Web/CSS/@font-face) and [`@supports`](/en-US/docs/Web/CSS/@supports) blocks — if they are not supported, the browser just ignores them.