diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md
index 8144a9193ef586d..4a5f7d1c981a42e 100644
--- a/files/en-us/web/css/--_star_/index.md
+++ b/files/en-us/web/css/--_star_/index.md
@@ -18,7 +18,7 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 ```css
 --somekeyword: left;
 --somecolor: #0000ff;
---somecomplexvalue: 3px 6px rgb(20, 32, 54);
+--somecomplexvalue: 3px 6px rgb(20 32 54);
 ```
 
 - `<declaration-value>`
diff --git a/files/en-us/web/css/-webkit-text-stroke-color/index.md b/files/en-us/web/css/-webkit-text-stroke-color/index.md
index a7d0c299b7407d6..d04f0a03f412580 100644
--- a/files/en-us/web/css/-webkit-text-stroke-color/index.md
+++ b/files/en-us/web/css/-webkit-text-stroke-color/index.md
@@ -15,7 +15,7 @@ The **`-webkit-text-stroke-color`** CSS property specifies the stroke [color](/e
 /* <color> values */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
+-webkit-text-stroke-color: rgb(200 100 0);
 
 /* Global values */
 -webkit-text-stroke-color: inherit;
diff --git a/files/en-us/web/css/@font-palette-values/override-colors/index.md b/files/en-us/web/css/@font-palette-values/override-colors/index.md
index dc3b0c076f8b5be..e2cf0d981805ae0 100644
--- a/files/en-us/web/css/@font-palette-values/override-colors/index.md
+++ b/files/en-us/web/css/@font-palette-values/override-colors/index.md
@@ -22,7 +22,7 @@ override-colors: 0 red;
 override-colors: 0 #f00;
 
 /* using rgb */
-override-colors: 0 rgb(255, 0, 0);
+override-colors: 0 rgb(255 0 0);
 
 /* overriding multiple colors */
 override-colors:
@@ -103,11 +103,11 @@ This example shows how to override colors in the [Noto Color Emoji](https://font
 @font-palette-values --red {
   font-family: "Noto Color Emoji";
   override-colors:
-    0 rgb(74, 11, 0),
-    1 rgb(149, 22, 1),
-    2 rgb(183, 27, 1),
-    3 rgb(193, 28, 1),
-    4 rgb(230, 34, 1);
+    0 rgb(74 11 0),
+    1 rgb(149 22 1),
+    2 rgb(183 27 1),
+    3 rgb(193 28 1),
+    4 rgb(230 34 1);
 }
 .red-hat {
   font-palette: --red;
diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md
index 98b7a69eebc1bcc..2c66c32bb7eb02d 100644
--- a/files/en-us/web/css/@starting-style/index.md
+++ b/files/en-us/web/css/@starting-style/index.md
@@ -262,7 +262,7 @@ html {
 
 /* Transition for the popover's backdrop */
 [popover]::backdrop {
-  background-color: rgb(0 0 0 / 0);
+  background-color: rgb(0 0 0 / 0%);
   transition:
     display 0.7s allow-discrete,
     overlay 0.7s allow-discrete,
@@ -272,14 +272,14 @@ html {
 }
 
 [popover]:popover-open::backdrop {
-  background-color: rgb(0 0 0 / 0.25);
+  background-color: rgb(0 0 0 / 25%);
 }
 
 /* Nesting (&) is not supported for pseudo-elements
 so specify a standalone starting-style block. */
 @starting-style {
   [popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: rgb(0 0 0 / 0%);
   }
 }
 ```
@@ -398,8 +398,8 @@ div {
   position: relative;
   background: linear-gradient(
     to right,
-    rgb(255 255 255 / 0),
-    rgb(255 255 255 / 0.5)
+    rgb(255 255 255 / 0%),
+    rgb(255 255 255 / 50%)
   );
   opacity: 1;
   scale: 1 1;
diff --git a/files/en-us/web/css/_colon_autofill/index.md b/files/en-us/web/css/_colon_autofill/index.md
index df81cf1112d6005..d71b4a50f00fae5 100644
--- a/files/en-us/web/css/_colon_autofill/index.md
+++ b/files/en-us/web/css/_colon_autofill/index.md
@@ -14,7 +14,7 @@ The **`:autofill`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) match
 > **Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:
 >
 > ```css
-> background-color: rgb(232, 240, 254) !important;
+> background-color: rgb(232 240 254) !important;
 > background-image: none !important;
 > color: -internal-light-dark(black, white) !important;
 > ```
diff --git a/files/en-us/web/css/_colon_has/index.md b/files/en-us/web/css/_colon_has/index.md
index 52867d692e71519..f93798977eab498 100644
--- a/files/en-us/web/css/_colon_has/index.md
+++ b/files/en-us/web/css/_colon_has/index.md
@@ -83,7 +83,7 @@ h2 {
 
 h2 {
   font-size: 1em;
-  color: rgb(150, 149, 149);
+  color: rgb(150 149 149);
 }
 ```
 
@@ -152,7 +152,7 @@ h1 {
 
 h2 {
   font-size: 1em;
-  color: rgb(150, 149, 149);
+  color: rgb(150 149 149);
 }
 
 h3 {
diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
index b7f7360d0d65d7e..33aa3c355c665c5 100644
--- a/files/en-us/web/css/_colon_host-context/index.md
+++ b/files/en-us/web/css/_colon_host-context/index.md
@@ -73,7 +73,7 @@ style.textContent =
   ":host-context(h1) { font-style: italic; }" +
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
 The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: " - no links in headers!" }` rules style the instance of the `<context-span>` element (the shadow host in this instance) inside the `<h1>`. We've used it to make it clear that the custom element shouldn't appear inside the `<h1>` in our design.
diff --git a/files/en-us/web/css/_colon_host/index.md b/files/en-us/web/css/_colon_host/index.md
index 38789f8cb8fe357..632c18916f89b78 100644
--- a/files/en-us/web/css/_colon_host/index.md
+++ b/files/en-us/web/css/_colon_host/index.md
@@ -59,10 +59,10 @@ style.textContent =
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host-context(article, aside) { color: gray; }" +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
-The `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.
+The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.
 
 ## Specifications
 
diff --git a/files/en-us/web/css/_colon_host_function/index.md b/files/en-us/web/css/_colon_host_function/index.md
index dabe5e8e82c3b61..71630459bda0620 100644
--- a/files/en-us/web/css/_colon_host_function/index.md
+++ b/files/en-us/web/css/_colon_host_function/index.md
@@ -62,7 +62,7 @@ style.textContent =
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host-context(article, aside) { color: gray; }" +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
 The `:host(.footer) { color : red; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the {{htmlelement("footer")}} a special color.
diff --git a/files/en-us/web/css/_colon_in-range/index.md b/files/en-us/web/css/_colon_in-range/index.md
index 9474ef54987d0a8..106c9cbecbb42d0 100644
--- a/files/en-us/web/css/_colon_in-range/index.md
+++ b/files/en-us/web/css/_colon_in-range/index.md
@@ -60,11 +60,11 @@ input {
 }
 
 input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
+  background-color: rgb(0 255 0 / 25%);
 }
 
 input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
+  background-color: rgb(255 0 0 / 25%);
   border: 2px solid red;
 }
 
diff --git a/files/en-us/web/css/_colon_modal/index.md b/files/en-us/web/css/_colon_modal/index.md
index af2c4eb591e8d63..68b58a298f3a170 100644
--- a/files/en-us/web/css/_colon_modal/index.md
+++ b/files/en-us/web/css/_colon_modal/index.md
@@ -65,7 +65,7 @@ This example styles a modal dialog that opens when the "Update details" button i
 :modal {
   border: 5px solid red;
   background-color: yellow;
-  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
+  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
 }
 ```
 
diff --git a/files/en-us/web/css/_colon_out-of-range/index.md b/files/en-us/web/css/_colon_out-of-range/index.md
index fad64144a248e2d..da9374b9010fc40 100644
--- a/files/en-us/web/css/_colon_out-of-range/index.md
+++ b/files/en-us/web/css/_colon_out-of-range/index.md
@@ -59,11 +59,11 @@ input {
 }
 
 input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
+  background-color: rgb(0 255 0 / 25%);
 }
 
 input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
+  background-color: rgb(255 0 0 / 25%);
   border: 2px solid red;
 }
 
diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
index 1621e7f8a661096..ac25b5a4e70c477 100644
--- a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
+++ b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -48,7 +48,7 @@ body {
 
 #styled::-webkit-meter-bar {
   background: #eee;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 2px 3px rgb(0 0 0 / 20%) inset;
   border-radius: 3px;
 }
 ```
diff --git a/files/en-us/web/css/_doublecolon_backdrop/index.md b/files/en-us/web/css/_doublecolon_backdrop/index.md
index 982caaaeab509d4..39982431677dbbe 100644
--- a/files/en-us/web/css/_doublecolon_backdrop/index.md
+++ b/files/en-us/web/css/_doublecolon_backdrop/index.md
@@ -32,7 +32,7 @@ When multiple elements have been placed into the top layer, each one has its own
 ```css
 /* Backdrop is only displayed when dialog is opened with dialog.showModal() */
 dialog::backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgb(255 0 0 / 25%);
 }
 ```
 
diff --git a/files/en-us/web/css/_doublecolon_cue/index.md b/files/en-us/web/css/_doublecolon_cue/index.md
index a1259b5529bc431..610eb9da4c8171a 100644
--- a/files/en-us/web/css/_doublecolon_cue/index.md
+++ b/files/en-us/web/css/_doublecolon_cue/index.md
@@ -68,7 +68,7 @@ The following CSS sets the cue style so that the text is white and the backgroun
 ```css
 ::cue {
   color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(0 0 0 / 60%);
 }
 ```
 
diff --git a/files/en-us/web/css/_doublecolon_part/index.md b/files/en-us/web/css/_doublecolon_part/index.md
index 5ffdc719e885d99..dfcba70bd981aca 100644
--- a/files/en-us/web/css/_doublecolon_part/index.md
+++ b/files/en-us/web/css/_doublecolon_part/index.md
@@ -71,7 +71,7 @@ tabbed-custom-element::part(tab):focus {
   box-shadow:
     0 0 0 1px #0a84ff inset,
     0 0 0 1px #0a84ff,
-    0 0 0 4px rgba(10, 132, 255, 0.3);
+    0 0 0 4px rgb(10 132 255 / 30%);
 }
 
 tabbed-custom-element::part(active) {
diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md
index 88ff26050de1313..0bd00af1a053401 100644
--- a/files/en-us/web/css/_doublecolon_view-transition/index.md
+++ b/files/en-us/web/css/_doublecolon_view-transition/index.md
@@ -36,7 +36,7 @@ All {{cssxref("::view-transition-group")}} pseudo-elements are positioned relati
 
 ```css
 ::view-transition {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgb(0 0 0 / 25%);
 }
 ```
 
diff --git a/files/en-us/web/css/backdrop-filter/index.md b/files/en-us/web/css/backdrop-filter/index.md
index 94c26eaba930592..622bdecd8bebf44 100644
--- a/files/en-us/web/css/backdrop-filter/index.md
+++ b/files/en-us/web/css/backdrop-filter/index.md
@@ -64,7 +64,7 @@ backdrop-filter: unset;
 
 ```css
 .box {
-  background-color: rgb(255 255 255 / 0.3);
+  background-color: rgb(255 255 255 / 30%);
   backdrop-filter: blur(10px);
 }
 
diff --git a/files/en-us/web/css/backface-visibility/index.md b/files/en-us/web/css/backface-visibility/index.md
index d28f0117b6bbbd4..ee0eb61686acb74 100644
--- a/files/en-us/web/css/backface-visibility/index.md
+++ b/files/en-us/web/css/backface-visibility/index.md
@@ -137,33 +137,33 @@ This example shows a cube with transparent faces, and one with opaque faces.
 
 /* Define each face based on direction */
 .front {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 255, 0, 1);
+  background: rgb(0 255 0 / 100%);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(196, 0, 0, 0.7);
+  background: rgb(196 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 196, 0.7);
+  background: rgb(0 0 196 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(196, 196, 0, 0.7);
+  background: rgb(196 196 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(196, 0, 196, 0.7);
+  background: rgb(196 0 196 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 
diff --git a/files/en-us/web/css/background-clip/index.md b/files/en-us/web/css/background-clip/index.md
index a9847bc9bcb898b..b0d0a52b3bcd436 100644
--- a/files/en-us/web/css/background-clip/index.md
+++ b/files/en-us/web/css/background-clip/index.md
@@ -102,7 +102,7 @@ p {
 .text {
   background-clip: text;
   -webkit-background-clip: text;
-  color: rgba(0, 0, 0, 0.2);
+  color: rgb(0 0 0 / 20%);
 }
 ```
 
diff --git a/files/en-us/web/css/background-color/index.md b/files/en-us/web/css/background-color/index.md
index 9791e0af94f75d1..2bb19463cfaf6d0 100644
--- a/files/en-us/web/css/background-color/index.md
+++ b/files/en-us/web/css/background-color/index.md
@@ -28,11 +28,11 @@ background-color: #1fef; /* Fully opaque shorthand */
 
 /* RGB value */
 background-color: rgb(255 255 128); /* Fully opaque */
-background-color: rgb(117 190 218 / 0.5); /* 50% transparent */
+background-color: rgb(117 190 218 / 50%); /* 50% transparent */
 
 /* HSL value */
 background-color: hsl(50 33% 25%); /* Fully opaque */
-background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */
+background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */
 
 /* Special keyword values */
 background-color: currentcolor;
@@ -91,8 +91,8 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
 }
 
 .exampletwo {
-  background-color: rgb(153, 102, 153);
-  color: rgb(255, 255, 204);
+  background-color: rgb(153 102 153);
+  color: rgb(255 255 204);
 }
 
 .examplethree {
diff --git a/files/en-us/web/css/background-image/index.md b/files/en-us/web/css/background-image/index.md
index 5da5b35a1025c14..824de652ad169a2 100644
--- a/files/en-us/web/css/background-image/index.md
+++ b/files/en-us/web/css/background-image/index.md
@@ -24,8 +24,8 @@ If a specified image cannot be drawn (for example, when the file denoted by the
 ```css
 background-image: linear-gradient(
     to bottom,
-    rgba(255, 255, 0, 0.5),
-    rgba(0, 0, 255, 0.5)
+    rgb(255 255 0 / 50%),
+    rgb(0 0 255 / 50%)
   ), url("catfront.png");
 
 /* Global values */
diff --git a/files/en-us/web/css/background-origin/index.md b/files/en-us/web/css/background-origin/index.md
index 17c0b1a22ecdeb7..bc2b2adfd148f1c 100644
--- a/files/en-us/web/css/background-origin/index.md
+++ b/files/en-us/web/css/background-origin/index.md
@@ -92,10 +92,10 @@ In this example the box has a thick dotted border. The first gradient uses the `
   color: #fff;
   background: linear-gradient(
       90deg,
-      rgba(131, 58, 180, 1) 0%,
-      rgba(253, 29, 29, 0.6) 60%,
-      rgba(252, 176, 69, 1) 100%
-    ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
+      rgb(131 58 180 / 100%) 0%,
+      rgb(253 29 29 / 60%) 60%,
+      rgb(252 176 69 / 100%) 100%
+    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
   border: 20px dashed black;
   padding: 20px;
   width: 400px;
diff --git a/files/en-us/web/css/border-bottom-color/index.md b/files/en-us/web/css/border-bottom-color/index.md
index d0c16de00db38db..d34e02bb4c2a7da 100644
--- a/files/en-us/web/css/border-bottom-color/index.md
+++ b/files/en-us/web/css/border-bottom-color/index.md
@@ -17,8 +17,8 @@ The **`border-bottom-color`** CSS property sets the color of an element's bottom
 /* <color> values */
 border-bottom-color: red;
 border-bottom-color: #ffbb00;
-border-bottom-color: rgb(255, 0, 0);
-border-bottom-color: hsl(100deg 50% 25% / 0.75);
+border-bottom-color: rgb(255 0 0);
+border-bottom-color: hsl(100deg 50% 25% / 75%);
 border-bottom-color: currentcolor;
 border-bottom-color: transparent;
 
diff --git a/files/en-us/web/css/border-color/index.md b/files/en-us/web/css/border-color/index.md
index f573b919c722fa1..f3220c3f1e9d5ec 100644
--- a/files/en-us/web/css/border-color/index.md
+++ b/files/en-us/web/css/border-color/index.md
@@ -34,7 +34,7 @@ border-color: red;
 border-color: red #f015ca;
 
 /* top | left and right | bottom */
-border-color: red rgb(240, 30, 50, 0.7) green;
+border-color: red rgb(240 30 50 / 70%) green;
 
 /* top | right | bottom | left */
 border-color: red yellow green blue;
diff --git a/files/en-us/web/css/border-left-color/index.md b/files/en-us/web/css/border-left-color/index.md
index cd4e16874b66d65..7e59de6419e434a 100644
--- a/files/en-us/web/css/border-left-color/index.md
+++ b/files/en-us/web/css/border-left-color/index.md
@@ -18,7 +18,7 @@ The **`border-left-color`** CSS property sets the color of an element's left [bo
 border-left-color: red;
 border-left-color: #ffbb00;
 border-left-color: rgb(255 0 0);
-border-left-color: hsl(100deg 50% 25% / 0.75);
+border-left-color: hsl(100deg 50% 25% / 75%);
 border-left-color: currentcolor;
 border-left-color: transparent;
 
diff --git a/files/en-us/web/css/border-right-color/index.md b/files/en-us/web/css/border-right-color/index.md
index 7a83c7b954f954d..ba3c959f64095bc 100644
--- a/files/en-us/web/css/border-right-color/index.md
+++ b/files/en-us/web/css/border-right-color/index.md
@@ -18,7 +18,7 @@ The **`border-right-color`** CSS property sets the color of an element's right [
 border-right-color: red;
 border-right-color: #ffbb00;
 border-right-color: rgb(255 0 0);
-border-right-color: hsl(100deg 50% 25% / 0.75);
+border-right-color: hsl(100deg 50% 25% / 75%);
 border-right-color: currentcolor;
 border-right-color: transparent;
 
diff --git a/files/en-us/web/css/border-top-color/index.md b/files/en-us/web/css/border-top-color/index.md
index 7b35f7fb79ff9df..fdfc40bd2d722c2 100644
--- a/files/en-us/web/css/border-top-color/index.md
+++ b/files/en-us/web/css/border-top-color/index.md
@@ -18,7 +18,7 @@ The **`border-top-color`** CSS property sets the color of an element's top [bord
 border-top-color: red;
 border-top-color: #ffbb00;
 border-top-color: rgb(255 0 0);
-border-top-color: hsl(100deg 50% 25% / 0.75);
+border-top-color: hsl(100deg 50% 25% / 75%);
 border-top-color: currentcolor;
 border-top-color: transparent;
 
diff --git a/files/en-us/web/css/bottom/index.md b/files/en-us/web/css/bottom/index.md
index a92a5a7353c79e4..95e7e0860272c24 100644
--- a/files/en-us/web/css/bottom/index.md
+++ b/files/en-us/web/css/bottom/index.md
@@ -97,7 +97,7 @@ p {
 div {
   width: 48%;
   text-align: center;
-  background: rgba(55, 55, 55, 0.2);
+  background: rgb(55 55 55 / 20%);
   border: 1px solid blue;
 }
 
diff --git a/files/en-us/web/css/box-shadow/index.md b/files/en-us/web/css/box-shadow/index.md
index 43d7cb1a65c27f2..6877695148cfb0f 100644
--- a/files/en-us/web/css/box-shadow/index.md
+++ b/files/en-us/web/css/box-shadow/index.md
@@ -31,7 +31,7 @@ box-shadow: 10px 5px 5px black;
 
 /* Four length values and a color */
 /* <length> | <length> | <length> | <length> | <color> */
-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
 
 /* inset, length values, and a color */
 /* <inset> | <length> | <length> | <color> */
@@ -125,9 +125,9 @@ In this example, we include three shadows: an inset shadow, a regular drop shado
 blockquote {
   padding: 20px;
   box-shadow:
-    inset 0 -3em 3em rgba(0, 200, 0, 0.3),
+    inset 0 -3em 3em rgb(0 200 0 / 30%),
     0 0 0 2px white,
-    0.3em 0.3em 1em rgba(200, 0, 0, 0.6);
+    0.3em 0.3em 1em rgb(200 0 0 / 60%);
 }
 ```
 
diff --git a/files/en-us/web/css/caret-color/index.md b/files/en-us/web/css/caret-color/index.md
index 3646d4a5d3af642..d0e410c0bdc7552 100644
--- a/files/en-us/web/css/caret-color/index.md
+++ b/files/en-us/web/css/caret-color/index.md
@@ -25,7 +25,7 @@ caret-color: currentcolor;
 caret-color: red;
 caret-color: #5729e9;
 caret-color: rgb(0 200 0);
-caret-color: hsl(228deg 4% 24% / 0.8);
+caret-color: hsl(228deg 4% 24% / 80%);
 
 /* Global values */
 caret-color: inherit;
diff --git a/files/en-us/web/css/color/index.md b/files/en-us/web/css/color/index.md
index f30957b14b05768..3894deb8db04532 100644
--- a/files/en-us/web/css/color/index.md
+++ b/files/en-us/web/css/color/index.md
@@ -108,13 +108,13 @@ p {
   color: #ff0000;
 }
 p {
-  color: rgb(255, 0, 0);
+  color: rgb(255 0 0);
 }
 p {
-  color: rgb(100%, 0%, 0%);
+  color: rgb(100% 0% 0%);
 }
 p {
-  color: hsl(0, 100%, 50%);
+  color: hsl(0 100% 50%);
 }
 
 /* 50% translucent */
@@ -122,10 +122,10 @@ p {
   color: #ff000080;
 }
 p {
-  color: rgba(255, 0, 0, 0.5);
+  color: rgb(255 0 0 / 50%);
 }
 p {
-  color: hsla(0, 100%, 50%, 0.5);
+  color: hsl(0 100% 50% / 50%);
 }
 ```
 
diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md
index f9e3965c86be80f..60f284917b7459a 100644
--- a/files/en-us/web/css/color_value/hsl/index.md
+++ b/files/en-us/web/css/color_value/hsl/index.md
@@ -19,7 +19,7 @@ Defining _complementary colors_ with `hsl()` can be done with a single formula,
 
 ```css
 hsl(120deg 75% 25%)
-hsl(120deg 75% 25% / 0.6)
+hsl(120deg 75% 25% / 60%)
 ```
 
 The function also accepts a legacy syntax in which all values are separated with commas.
@@ -105,7 +105,7 @@ div.space-separated {
 }
 
 div.comma-separated {
-  background-color: hsl(0, 100%, 50%, 50%);
+  background-color: hsl(0, 100%, 50%, 0.5);
 }
 ```
 
@@ -138,7 +138,7 @@ div.hsl {
 }
 
 div.hsla {
-  background-color: hsla(0, 100%, 50%, 50%);
+  background-color: hsla(0, 100%, 50%, 0.5);
 }
 ```
 
diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md
index 44a22352eab90af..c1e7a1e5411f129 100644
--- a/files/en-us/web/css/color_value/index.md
+++ b/files/en-us/web/css/color_value/index.md
@@ -29,7 +29,7 @@ rgb(255 0 153 / 80%)
 
 /* HSL (Hue, Saturation, Lightness) */
 hsl(150 30% 60%)
-hsl(150 30% 60% / 0.8)
+hsl(150 30% 60% / 80%)
 
 /* HWB (Hue, Whiteness, Blackness) */
 hwb(12 50% 0%)
diff --git a/files/en-us/web/css/color_value/rgb/index.md b/files/en-us/web/css/color_value/rgb/index.md
index 1abcd022ee10773..43439ef147c12d9 100644
--- a/files/en-us/web/css/color_value/rgb/index.md
+++ b/files/en-us/web/css/color_value/rgb/index.md
@@ -17,7 +17,7 @@ The **`rgb()`** functional notation expresses a color according to its red, gree
 
 ```css
 rgb(255 255 255)
-rgb(255 255 255 / .5)
+rgb(255 255 255 / 50%)
 ```
 
 The function also accepts a legacy syntax in which all values are separated with commas.
@@ -62,7 +62,7 @@ div {
 }
 
 div.space-separated {
-  background-color: rgb(255 0 0 / 0.5);
+  background-color: rgb(255 0 0 / 50%);
 }
 
 div.comma-separated {
@@ -95,7 +95,7 @@ div {
 }
 
 div.rgb {
-  background-color: rgb(255 0 0 / 0.5);
+  background-color: rgb(255 0 0 / 50%);
 }
 
 div.rgba {
diff --git a/files/en-us/web/css/column-rule-color/index.md b/files/en-us/web/css/column-rule-color/index.md
index 1a26dcc66ecbdca..f5fc7181483e1ec 100644
--- a/files/en-us/web/css/column-rule-color/index.md
+++ b/files/en-us/web/css/column-rule-color/index.md
@@ -18,7 +18,7 @@ The **`column-rule-color`** [CSS](/en-US/docs/Web/CSS) property sets the color o
 column-rule-color: red;
 column-rule-color: rgb(192 56 78);
 column-rule-color: transparent;
-column-rule-color: hsl(0 100% 50% / 0.6);
+column-rule-color: hsl(0 100% 50% / 60%);
 
 /* Global values */
 column-rule-color: inherit;
diff --git a/files/en-us/web/css/content-visibility/index.md b/files/en-us/web/css/content-visibility/index.md
index 2bd9ad0ca6af873..a1fc37961f4a70b 100644
--- a/files/en-us/web/css/content-visibility/index.md
+++ b/files/en-us/web/css/content-visibility/index.md
@@ -216,24 +216,24 @@ div {
 @keyframes show {
   0% {
     content-visibility: hidden;
-    color: rgb(0 0 0 / 0);
+    color: rgb(0 0 0 / 0%);
   }
 
   100% {
     content-visibility: visible;
-    color: rgb(0 0 0 / 1);
+    color: rgb(0 0 0 / 100%);
   }
 }
 
 @keyframes hide {
   0% {
     content-visibility: visible;
-    color: rgb(0 0 0 / 1);
+    color: rgb(0 0 0 / 100%);
   }
 
   100% {
     content-visibility: hidden;
-    color: rgb(0 0 0 / 0);
+    color: rgb(0 0 0 / 0%);
   }
 }
 ```
diff --git a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 818ff5a10843757..03a3c2c9cc4ddaa 100644
--- a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -37,7 +37,8 @@ In this example, three backgrounds are stacked: the Firefox logo, an image of bu
 .multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
+          75 115 / 100%), rgb(255 255 255 / 0%));
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     bottom right,
diff --git a/files/en-us/web/css/css_colors/applying_color/index.md b/files/en-us/web/css/css_colors/applying_color/index.md
index d91635c88ac0cfe..746477aa8a57a47 100644
--- a/files/en-us/web/css/css_colors/applying_color/index.md
+++ b/files/en-us/web/css/css_colors/applying_color/index.md
@@ -118,9 +118,9 @@ Legal values for each of these parameters are:
 - `red`, `green`, and `blue`
   - : Each must be an {{cssxref("&lt;integer&gt;")}} value between 0 and 255 (inclusive), or a {{cssxref("&lt;percentage&gt;")}} from 0% to 100%.
 - `alpha`
-  - : The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
+  - : The alpha channel is specified as a percentage between 0% (fully transparent) and 100% (fully opaque), or a number between 0.0 (equivalent to 0%) and 1.0 (equivalent to 100%).
 
-For example, a bright red that's 50% opaque can be represented as `rgb(255, 0, 0, 0.5)` or `rgb(100%, 0, 0, 50%)`.
+For example, a bright red that's 50% opaque can be represented as `rgb(255 0 0 / 50%)` or `rgb(100% 0 0 / 0.5)`.
 
 ### Color functions with a hue component
 
@@ -387,7 +387,7 @@ For example, if we wanted to show the `display-p3 0 0 1` color, which is outside
 ```css
 .vibrant {
   background-color: color(display-p3 0 0 1);
-  /* Equivalent to out-of-gamut rgb(-27, 55, 153) */
+  /* Equivalent to out-of-gamut rgb(-27 55 153) */
 }
 
 @media (color-gamut: p3) {
@@ -469,14 +469,14 @@ In brief, `.box` establishes the size of each box, as well as the configuration
 ```css
 .boxLeft {
   float: left;
-  background-color: rgb(245, 130, 130);
+  background-color: rgb(245 130 130);
   outline: 2px solid darkred;
 }
 ```
 
 The `.boxLeft` class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:
 
-- The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to `rgb(245, 130, 130)`.
+- The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to `rgb(245 130 130)`.
 - An outline is defined for the box. Unlike the more commonly used `border`, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as `border` does. This outline is a solid, dark red line that's two pixels thick. Note the use of the `darkred` keyword when specifying the color.
 - Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.
 
@@ -484,7 +484,7 @@ The `.boxLeft` class—which, cleverly, is used to style the box on the left—f
 .boxRight {
   float: right;
   background-color: hsl(270deg, 50%, 75%);
-  outline: 4px dashed rgb(110, 20, 120);
+  outline: 4px dashed rgb(110 20 120);
   color: hsl(0deg, 100%, 100%);
   text-decoration: underline wavy #88ff88;
   text-shadow: 2px 2px 3px black;
@@ -496,7 +496,7 @@ The `.boxLeft` class—which, cleverly, is used to style the box on the left—f
 Finally, the `.boxRight` class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:
 
 - The `background-color` is set using the HSL value specified using `hsl(270deg, 50%, 75%)`. This is a medium purple color.
-- The box's `outline` is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (`rgb(110, 20, 120)`).
+- The box's `outline` is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (`rgb(110 20 120)`).
 - The foreground (text) color is specified by setting the {{cssxref("color")}} property to `hsl(0deg, 100%, 100%)`. This is one of many ways to specify the color white.
 - We add a green wavy line under the text with {{cssxref("text-decoration")}}.
 - Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its `color` parameter is set to `black`.
@@ -535,7 +535,7 @@ The CSS establishes a size for the box and some basic styling for appearances. T
 #box {
   width: 500px;
   height: 200px;
-  border: 2px solid rgb(245, 220, 225);
+  border: 2px solid rgb(245 220 225);
   padding: 4px 6px;
   font:
     16px "Lucida Grande",
diff --git a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
index 3c77988021dfe2e..6d14c47211ccf13 100644
--- a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
+++ b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
@@ -122,7 +122,7 @@ This example applies two filters — [`hue-rotate()`](/en-US/docs/Web/CSS/filter
 }
 p {
   backdrop-filter: hue-rotate(240deg) blur(5px);
-  background-color: rgb(255 255 255 / 0.1);
+  background-color: rgb(255 255 255 / 10%);
   text-shadow: 2px 2px black;
 }
 ```
diff --git a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
index 01621dd2f18ec54..77b773f7d625adc 100644
--- a/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
+++ b/files/en-us/web/css/css_grid_layout/grid_layout_using_named_grid_lines/index.md
@@ -214,9 +214,9 @@ To position `overlay` using these implicit named lines is the same as positionin
   z-index: 10;
   grid-column: main-start / main-end;
   grid-row: hd-start / ft-end;
-  border: 4px solid rgb(92, 148, 13);
-  background-color: rgba(92, 148, 13, 0.4);
-  color: rgb(92, 148, 13);
+  border: 4px solid rgb(92 148 13);
+  background-color: rgb(92 148 13 / 40%);
+  color: rgb(92 148 13);
   font-size: 150%;
 }
 ```
diff --git a/files/en-us/web/css/css_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/index.md
index 56f4798690d52e8..8b6b66298225a25 100644
--- a/files/en-us/web/css/css_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/index.md
@@ -27,7 +27,7 @@ The example below shows a three-column track grid with new rows created at a min
 .wrapper > div {
   border: 2px solid rgb(233 171 88);
   border-radius: 5px;
-  background-color: rgba(233 171 88 / 0.5);
+  background-color: rgb(233 171 88 / 50%);
   padding: 1em;
   color: #d9480f;
 }
diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index 2fbcacff051e99d..c29d8e37d74b061 100644
--- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -456,8 +456,8 @@ I have given `.box3` position relative and then positioned the sub-item with the
   position: absolute;
   top: 40px;
   left: 40px;
-  background-color: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgb(255 255 255 / 50%);
+  border: 1px solid rgb(0 0 0 / 50%);
   color: #000;
   padding: 10px;
 }
diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.md b/files/en-us/web/css/css_images/using_css_gradients/index.md
index c9bb15bbae5cdde..9473daaa0f2db34 100644
--- a/files/en-us/web/css/css_images/using_css_gradients/index.md
+++ b/files/en-us/web/css/css_images/using_css_gradients/index.md
@@ -353,10 +353,10 @@ div {
 .stacked-linear {
   background: linear-gradient(
       217deg,
-      rgba(255, 0, 0, 0.8),
-      rgba(255, 0, 0, 0) 70.71%
-    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
+      rgb(255 0 0 / 80%),
+      rgb(255 0 0 / 0%) 70.71%
+    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
+    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
 }
 ```
 
@@ -598,18 +598,18 @@ div {
   background:
     radial-gradient(
       circle at 50% 0,
-      rgba(255, 0, 0, 0.5),
-      rgba(255, 0, 0, 0) 70.71%
+      rgb(255 0 0 / 50%),
+      rgb(255 0 0 / 0%) 70.71%
     ),
     radial-gradient(
       circle at 6.7% 75%,
-      rgba(0, 0, 255, 0.5),
-      rgba(0, 0, 255, 0) 70.71%
+      rgb(0 0 255 / 50%),
+      rgb(0 0 255 / 0%) 70.71%
     ),
     radial-gradient(
         circle at 93.3% 75%,
-        rgba(0, 255, 0, 0.5),
-        rgba(0, 255, 0, 0) 70.71%
+        rgb(0 255 0 / 50%),
+        rgb(0 255 0 / 0%) 70.71%
       ) beige;
   border-radius: 50%;
 }
@@ -750,24 +750,24 @@ div {
 .multi-repeating-linear {
   background: repeating-linear-gradient(
       190deg,
-      rgba(255, 0, 0, 0.5) 40px,
-      rgba(255, 153, 0, 0.5) 80px,
-      rgba(255, 255, 0, 0.5) 120px,
-      rgba(0, 255, 0, 0.5) 160px,
-      rgba(0, 0, 255, 0.5) 200px,
-      rgba(75, 0, 130, 0.5) 240px,
-      rgba(238, 130, 238, 0.5) 280px,
-      rgba(255, 0, 0, 0.5) 300px
+      rgb(255 0 0 / 50%) 40px,
+      rgb(255 153 0 / 50%) 80px,
+      rgb(255 255 0 / 50%) 120px,
+      rgb(0 255 0 / 50%) 160px,
+      rgb(0 0 255 / 50%) 200px,
+      rgb(75 0 130 / 50%) 240px,
+      rgb(238 130 238 / 50%) 280px,
+      rgb(255 0 0 / 50%) 300px
     ), repeating-linear-gradient(
       -190deg,
-      rgba(255, 0, 0, 0.5) 30px,
-      rgba(255, 153, 0, 0.5) 60px,
-      rgba(255, 255, 0, 0.5) 90px,
-      rgba(0, 255, 0, 0.5) 120px,
-      rgba(0, 0, 255, 0.5) 150px,
-      rgba(75, 0, 130, 0.5) 180px,
-      rgba(238, 130, 238, 0.5) 210px,
-      rgba(255, 0, 0, 0.5) 230px
+      rgb(255 0 0 / 50%) 30px,
+      rgb(255 153 0 / 50%) 60px,
+      rgb(255 255 0 / 50%) 90px,
+      rgb(0 255 0 / 50%) 120px,
+      rgb(0 0 255 / 50%) 150px,
+      rgb(75 0 130 / 50%) 180px,
+      rgb(238 130 238 / 50%) 210px,
+      rgb(255 0 0 / 50%) 230px
     ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
         200px, blue 250px, indigo 300px, violet 350px, red 370px);
 }
diff --git a/files/en-us/web/css/css_transforms/using_css_transforms/index.md b/files/en-us/web/css/css_transforms/using_css_transforms/index.md
index dfcbbe81749bd84..83a29ee09b4b33d 100644
--- a/files/en-us/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/en-us/web/css/css_transforms/using_css_transforms/index.md
@@ -191,33 +191,33 @@ The CSS establishes classes that can be used to set the perspective to different
 
 /* Define each face based on direction */
 .front {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 255, 0, 1);
+  background: rgb(0 255 0 / 100%);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(196, 0, 0, 0.7);
+  background: rgb(196 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 196, 0.7);
+  background: rgb(0 0 196 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(196, 196, 0, 0.7);
+  background: rgb(196 196 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(196, 0, 196, 0.7);
+  background: rgb(196 0 196 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 
@@ -488,28 +488,28 @@ This example shows cubes with popular `perspective-origin` values.
 
 /* Define each face based on direction */
 .front {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   transform: translateZ(50px);
 }
 .back {
-  background: rgba(0, 255, 0, 1);
+  background: rgb(0 255 0 / 100%);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
 }
 .right {
-  background: rgba(196, 0, 0, 0.7);
+  background: rgb(196 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 .left {
-  background: rgba(0, 0, 196, 0.7);
+  background: rgb(0 0 196 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 .top {
-  background: rgba(196, 196, 0, 0.7);
+  background: rgb(196 196 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 .bottom {
-  background: rgba(196, 0, 196, 0.7);
+  background: rgb(196 0 196 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 
diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md
index a8fe661635db476..7c0d20325bfced1 100644
--- a/files/en-us/web/css/easing-function/index.md
+++ b/files/en-us/web/css/easing-function/index.md
@@ -206,8 +206,8 @@ div > div {
   background-color: blue;
   background-image: radial-gradient(
     circle at 10px 10px,
-    rgba(25, 255, 255, 0.8),
-    rgba(25, 255, 255, 0.4)
+    rgb(25 255 255 / 80%),
+    rgb(25 255 255 / 40%)
   );
   border-radius: 50%;
   top: 25px;
diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md
index 64712cae94a3274..62a68a3c7d0f1d3 100644
--- a/files/en-us/web/css/flex-grow/index.md
+++ b/files/en-us/web/css/flex-grow/index.md
@@ -87,12 +87,12 @@ In this example, there is a total of 8 growth factors distributed among the 6 fl
 
 .small {
   flex-grow: 1;
-  border: 3px solid rgba(0, 0, 0, 0.2);
+  border: 3px solid rgb(0 0 0 / 20%);
 }
 
 .double {
   flex-grow: 2;
-  border: 3px solid rgba(0, 0, 0, 0.2);
+  border: 3px solid rgb(0 0 0 / 20%);
 }
 ```
 
diff --git a/files/en-us/web/css/flex-shrink/index.md b/files/en-us/web/css/flex-shrink/index.md
index 9c4eeae55653703..3e8d5b113ea762b 100644
--- a/files/en-us/web/css/flex-shrink/index.md
+++ b/files/en-us/web/css/flex-shrink/index.md
@@ -72,7 +72,7 @@ The `flex-shrink` property is specified as a single `<number>`.
 
 #content div {
   flex-basis: 120px;
-  border: 3px solid rgba(0, 0, 0, 0.2);
+  border: 3px solid rgb(0 0 0 / 20%);
 }
 
 .box {
diff --git a/files/en-us/web/css/gradient/index.md b/files/en-us/web/css/gradient/index.md
index 711efc9b35906b6..14e8ad6877e5eef 100644
--- a/files/en-us/web/css/gradient/index.md
+++ b/files/en-us/web/css/gradient/index.md
@@ -92,7 +92,7 @@ div {
 
 ```css
 .radial-gradient {
-  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+  background: radial-gradient(red, yellow, rgb(30 144 255));
 }
 ```
 
diff --git a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
index d0b5de25504efae..5bd8cbcc4617bb2 100644
--- a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
+++ b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
@@ -114,9 +114,9 @@ body {
 body {
   background-image: repeating-linear-gradient(
     to bottom,
-    rgb(26, 198, 204),
-    rgb(26, 198, 204) 7%,
-    rgb(100, 100, 100) 10%
+    rgb(26 198 204),
+    rgb(26 198 204) 7%,
+    rgb(100 100 100) 10%
   );
 }
 ```
diff --git a/files/en-us/web/css/hue/index.md b/files/en-us/web/css/hue/index.md
index c92a83d1b0cd484..e99092c44acbce0 100644
--- a/files/en-us/web/css/hue/index.md
+++ b/files/en-us/web/css/hue/index.md
@@ -155,7 +155,7 @@ p {
 }
 span {
   font-family: monospace;
-  background: rgb(0 0 0 / 0.1);
+  background: rgb(0 0 0 / 10%);
   padding: 3px;
 }
 #hue-slider {
diff --git a/files/en-us/web/css/image/image/index.md b/files/en-us/web/css/image/image/index.md
index f4352c72d9bc2c2..1f1ac86b803e18d 100644
--- a/files/en-us/web/css/image/image/index.md
+++ b/files/en-us/web/css/image/image/index.md
@@ -116,7 +116,7 @@ When the user hovers over the box, the cursor will change to display the 16x16 p
 
 ```css
 .quarterlogo {
-  background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png");
+  background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
   background-size: 25%;
   background-repeat: no-repeat;
 }
diff --git a/files/en-us/web/css/image/paint/index.md b/files/en-us/web/css/image/paint/index.md
index e8a04aaba895793..5d87bf15612eafd 100644
--- a/files/en-us/web/css/image/paint/index.md
+++ b/files/en-us/web/css/image/paint/index.md
@@ -37,14 +37,14 @@ CSS.paintWorklet.addModule("boxbg.js");
 ```css
 li {
   background-image: paint(boxbg);
-  --boxColor: hsl(55 90% 60% / 1);
+  --boxColor: hsl(55 90% 60% / 100%);
 }
 li:nth-of-type(3n) {
-  --boxColor: hsl(155 90% 60% / 1);
+  --boxColor: hsl(155 90% 60% / 100%);
   --widthSubtractor: 20;
 }
 li:nth-of-type(3n + 1) {
-  --boxColor: hsl(255 90% 60% / 1);
+  --boxColor: hsl(255 90% 60% / 100%);
   --widthSubtractor: 40;
 }
 ```
diff --git a/files/en-us/web/css/length/index.md b/files/en-us/web/css/length/index.md
index 82d32c7cf1a099e..f4bdc389c15ccea 100644
--- a/files/en-us/web/css/length/index.md
+++ b/files/en-us/web/css/length/index.md
@@ -229,15 +229,15 @@ html {
   height: 50px;
   background-color: #999;
   box-shadow:
-    inset 3px 3px 5px rgb(255 255 255 / 0.5),
-    inset -3px -3px 5px rgb(0 0 0 / 0.5);
+    inset 3px 3px 5px rgb(255 255 255 / 50%),
+    inset -3px -3px 5px rgb(0 0 0 / 50%);
 }
 
 .result {
   height: 20px;
   box-shadow:
-    inset 3px 3px 5px rgba(255 255 255 / 0.5),
-    inset -3px -3px 5px rgb(0 0 0 / 0.5);
+    inset 3px 3px 5px rgb(255 255 255 / 50%),
+    inset -3px -3px 5px rgb(0 0 0 / 50%);
   background-color: orange;
   display: flex;
   align-items: center;
diff --git a/files/en-us/web/css/mask-image/index.md b/files/en-us/web/css/mask-image/index.md
index 9445ad87d4abdfa..e254b7273d21fd9 100644
--- a/files/en-us/web/css/mask-image/index.md
+++ b/files/en-us/web/css/mask-image/index.md
@@ -20,11 +20,11 @@ mask-image: none;
 mask-image: url(masks.svg#mask1);
 
 /* <image> values */
-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
+mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
 mask-image: image(url(mask.png), skyblue);
 
 /* Multiple values */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);
 
 /* Global values */
 mask-image: inherit;
diff --git a/files/en-us/web/css/mask-type/index.md b/files/en-us/web/css/mask-type/index.md
index d12ac7d3da7fb9c..dc3f176a51d9c04 100644
--- a/files/en-us/web/css/mask-type/index.md
+++ b/files/en-us/web/css/mask-type/index.md
@@ -77,7 +77,7 @@ The `mask-type` property is specified as one of the keyword values listed below.
 .redsquare {
   height: 100px;
   width: 100px;
-  background-color: rgb(128, 128, 128);
+  background-color: rgb(128 128 128);
   border: solid 1px black;
   mask: url("#m");
 }
@@ -122,7 +122,7 @@ The `mask-type` property is specified as one of the keyword values listed below.
 .redsquare {
   height: 100px;
   width: 100px;
-  background-color: rgb(128, 128, 128);
+  background-color: rgb(128 128 128);
   border: solid 1px black;
   mask: url("#m");
 }
diff --git a/files/en-us/web/css/named-color/index.md b/files/en-us/web/css/named-color/index.md
index 2ff58d897f4913b..0b8ca97203ea259 100644
--- a/files/en-us/web/css/named-color/index.md
+++ b/files/en-us/web/css/named-color/index.md
@@ -893,7 +893,7 @@ In [CSS Colors Level 4](https://www.w3.org/TR/css-color-4/#named-colors), an add
 
 ### transparent
 
-The `transparent` keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, `transparent` is a shortcut for `rgba(0,0,0,0)`.
+The `transparent` keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, `transparent` is a shortcut for `rgb(0 0 0 / 0%)`.
 
 To prevent unexpected behavior, such as in a {{cssxref("gradient")}}, the current CSS spec states that `transparent` should be calculated in the [alpha-premultiplied color space](https://www.w3.org/TR/css-color-4/#interpolation-alpha). However, be aware that older browsers may treat it as black with an alpha value of `0`.
 
diff --git a/files/en-us/web/css/opacity/index.md b/files/en-us/web/css/opacity/index.md
index 1f8e4ea55507554..c7fd085a29d1e29 100644
--- a/files/en-us/web/css/opacity/index.md
+++ b/files/en-us/web/css/opacity/index.md
@@ -48,7 +48,7 @@ When `opacity` value is set to `0`, the element and all of its children are not
 To change the opacity of a background only, use the {{cssxref("background")}} property with a {{cssxref("color_value", "color value")}} that allows for an alpha channel. For example:
 
 ```css
-background: rgba(0, 0, 0, 0.4);
+background: rgb(0 0 0 / 40%);
 ```
 
 ## Accessibility concerns
@@ -143,7 +143,7 @@ img.opacity:hover {
   background-image: linear-gradient(
     90deg,
     transparent 50%,
-    rgba(255, 255, 255, 0.5) 50%
+    rgb(255 255 255 / 50%) 50%
   );
   background-size: 20px 20px;
 }
diff --git a/files/en-us/web/css/outline-color/index.md b/files/en-us/web/css/outline-color/index.md
index 666a935ec8ceb30..0b1e113abfcc2db 100644
--- a/files/en-us/web/css/outline-color/index.md
+++ b/files/en-us/web/css/outline-color/index.md
@@ -16,7 +16,7 @@ The **`outline-color`** CSS property sets the color of an element's outline.
 ```css
 /* <color> values */
 outline-color: #f92525;
-outline-color: rgb(30, 222, 121);
+outline-color: rgb(30 222 121);
 outline-color: blue;
 
 /* Keyword value */
diff --git a/files/en-us/web/css/overlay/index.md b/files/en-us/web/css/overlay/index.md
index 488e31da9b09e43..9f95147a0f1eaf2 100644
--- a/files/en-us/web/css/overlay/index.md
+++ b/files/en-us/web/css/overlay/index.md
@@ -103,7 +103,7 @@ html {
 /* Transition for the popover's backdrop */
 
 [popover]::backdrop {
-  background-color: rgb(0 0 0 / 0);
+  background-color: rgb(0 0 0 / 0%);
   transition:
     display 0.7s allow-discrete,
     overlay 0.7s allow-discrete,
@@ -113,7 +113,7 @@ html {
 }
 
 [popover]:popover-open::backdrop {
-  background-color: rgb(0 0 0 / 0.25);
+  background-color: rgb(0 0 0 / 25%);
 }
 
 /* Nesting selectors (&) cannot represent pseudo-elements, so this 
@@ -121,7 +121,7 @@ html {
 
 @starting-style {
   [popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: rgb(0 0 0 / 0%);
   }
 }
 ```
diff --git a/files/en-us/web/css/overscroll-behavior-block/index.md b/files/en-us/web/css/overscroll-behavior-block/index.md
index ead4ca56b550127..6491a32ddd7810e 100644
--- a/files/en-us/web/css/overscroll-behavior-block/index.md
+++ b/files/en-us/web/css/overscroll-behavior-block/index.md
@@ -79,9 +79,9 @@ main {
   background-color: white;
   background-image: repeating-linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0) 0px,
-    rgba(0, 0, 0, 0) 19px,
-    rgba(0, 0, 0, 0.5) 20px
+    rgb(0 0 0 / 0%) 0px,
+    rgb(0 0 0 / 0%) 19px,
+    rgb(0 0 0 / 50%) 20px
   );
 }
 
@@ -101,15 +101,15 @@ div > div {
   background-color: yellow;
   background-image: repeating-linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0) 0px,
-    rgba(0, 0, 0, 0) 19px,
-    rgba(0, 0, 0, 0.5) 20px
+    rgb(0 0 0 / 0%) 0px,
+    rgb(0 0 0 / 0%) 19px,
+    rgb(0 0 0 / 50%) 20px
   );
 }
 
 p {
   padding: 10px;
-  background-color: rgba(255, 0, 0, 0.5);
+  background-color: rgb(255 0 0 / 50%);
   margin: 0;
   width: 340px;
   position: relative;
diff --git a/files/en-us/web/css/overscroll-behavior-inline/index.md b/files/en-us/web/css/overscroll-behavior-inline/index.md
index e85287e888e0139..a9d2c5427692b6e 100644
--- a/files/en-us/web/css/overscroll-behavior-inline/index.md
+++ b/files/en-us/web/css/overscroll-behavior-inline/index.md
@@ -79,9 +79,9 @@ main {
   background-color: white;
   background-image: repeating-linear-gradient(
     to right,
-    rgba(0, 0, 0, 0) 0px,
-    rgba(0, 0, 0, 0) 19px,
-    rgba(0, 0, 0, 0.5) 20px
+    rgb(0 0 0 / 0%) 0px,
+    rgb(0 0 0 / 0%) 19px,
+    rgb(0 0 0 / 50%) 20px
   );
 }
 
@@ -101,15 +101,15 @@ div > div {
   background-color: yellow;
   background-image: repeating-linear-gradient(
     to right,
-    rgba(0, 0, 0, 0) 0px,
-    rgba(0, 0, 0, 0) 19px,
-    rgba(0, 0, 0, 0.5) 20px
+    rgb(0 0 0 / 0%) 0px,
+    rgb(0 0 0 / 0%) 19px,
+    rgb(0 0 0 / 50%) 20px
   );
 }
 
 p {
   padding: 10px;
-  background-color: rgba(255, 0, 0, 0.5);
+  background-color: rgb(255 0 0 / 50%);
   margin: 0;
   width: 360px;
   position: relative;
diff --git a/files/en-us/web/css/print-color-adjust/index.md b/files/en-us/web/css/print-color-adjust/index.md
index d3d58629b5b66ad..f2fb35932391e43 100644
--- a/files/en-us/web/css/print-color-adjust/index.md
+++ b/files/en-us/web/css/print-color-adjust/index.md
@@ -70,10 +70,7 @@ For whatever reason, this is the desired appearance in any rendering environment
 ```css
 .my-box {
   background-color: black;
-  background-image: linear-gradient(
-    rgba(0, 0, 180, 0.5),
-    rgba(70, 140, 220, 0.5)
-  );
+  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
   color: #900;
   width: 15rem;
   height: 6rem;
diff --git a/files/en-us/web/css/text-decoration-color/index.md b/files/en-us/web/css/text-decoration-color/index.md
index 0f935d77b23183c..b9042f34f3e612f 100644
--- a/files/en-us/web/css/text-decoration-color/index.md
+++ b/files/en-us/web/css/text-decoration-color/index.md
@@ -22,7 +22,7 @@ CSS does not provide a direct mechanism for specifying a unique color for each l
 text-decoration-color: currentcolor;
 text-decoration-color: red;
 text-decoration-color: #00ff00;
-text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: rgb(255 128 128 / 50%);
 text-decoration-color: transparent;
 
 /* Global values */
diff --git a/files/en-us/web/css/text-emphasis-color/index.md b/files/en-us/web/css/text-emphasis-color/index.md
index 60c83db3626abf9..3157561b73d6c08 100644
--- a/files/en-us/web/css/text-emphasis-color/index.md
+++ b/files/en-us/web/css/text-emphasis-color/index.md
@@ -20,7 +20,7 @@ text-emphasis-color: currentcolor;
 /* <color> */
 text-emphasis-color: #555;
 text-emphasis-color: blue;
-text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: rgb(90 200 160 / 80%);
 text-emphasis-color: transparent;
 
 /* Global values */
diff --git a/files/en-us/web/css/transform-function/index.md b/files/en-us/web/css/transform-function/index.md
index 72834a7a3a63816..98cdd8ff268ed70 100644
--- a/files/en-us/web/css/transform-function/index.md
+++ b/files/en-us/web/css/transform-function/index.md
@@ -189,32 +189,32 @@ main {
 }
 
 .front {
-  background: rgba(90, 90, 90, 0.7);
+  background: rgb(90 90 90 / 70%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 210, 0, 0.7);
+  background: rgb(0 210 0 / 70%);
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(210, 0, 0, 0.7);
+  background: rgb(210 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 210, 0.7);
+  background: rgb(0 0 210 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(210, 210, 0, 0.7);
+  background: rgb(210 210 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(210, 0, 210, 0.7);
+  background: rgb(210 0 210 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 
diff --git a/files/en-us/web/css/transform-function/matrix3d/index.md b/files/en-us/web/css/transform-function/matrix3d/index.md
index 6035435a02f981b..b24423b4ecfb0d0 100644
--- a/files/en-us/web/css/transform-function/matrix3d/index.md
+++ b/files/en-us/web/css/transform-function/matrix3d/index.md
@@ -143,32 +143,32 @@ a `matrix3d()` transform to it.
 }
 
 .front {
-  background: rgba(90, 90, 90, 0.7);
+  background: rgb(90 90 90 / 70%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 210, 0, 0.7);
+  background: rgb(0 210 0 / 70%);
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(210, 0, 0, 0.7);
+  background: rgb(210 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 210, 0.7);
+  background: rgb(0 0 210 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(210, 210, 0, 0.7);
+  background: rgb(210 210 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(210, 0, 210, 0.7);
+  background: rgb(210 0 210 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 ```
diff --git a/files/en-us/web/css/transform-style/index.md b/files/en-us/web/css/transform-style/index.md
index 219b34163d50b8c..8fbfc45ee9ac8ae 100644
--- a/files/en-us/web/css/transform-style/index.md
+++ b/files/en-us/web/css/transform-style/index.md
@@ -95,32 +95,32 @@ We also provide a checkbox allowing you to toggle between this, and `transform-s
 }
 
 .front {
-  background: rgba(90, 90, 90, 0.7);
+  background: rgb(90 90 90 / 70%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 210, 0, 0.7);
+  background: rgb(0 210 0 / 70%);
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(210, 0, 0, 0.7);
+  background: rgb(210 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 210, 0.7);
+  background: rgb(0 0 210 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(210, 210, 0, 0.7);
+  background: rgb(210 210 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(210, 0, 210, 0.7);
+  background: rgb(210 0 210 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 ```
diff --git a/files/en-us/web/css/url/index.md b/files/en-us/web/css/url/index.md
index c9adac68e17a5eb..aaf2ae3d48af6b8 100644
--- a/files/en-us/web/css/url/index.md
+++ b/files/en-us/web/css/url/index.md
@@ -39,7 +39,7 @@ border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
 
 /* As a parameter in another CSS function */
 background-image: cross-fade(20% url(first.png), url(second.png));
-mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgb(0 0 0 / 100%), transparent));
 
 /* as part of a non-shorthand multiple value */
 content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
diff --git a/files/en-us/web/css/white-space/index.md b/files/en-us/web/css/white-space/index.md
index 9151ee53df908fa..76faa82727739c4 100644
--- a/files/en-us/web/css/white-space/index.md
+++ b/files/en-us/web/css/white-space/index.md
@@ -202,7 +202,7 @@ pre {
 }
 
 #css-code {
-  background-color: rgb(220, 220, 220);
+  background-color: rgb(220 220 220);
   font-size: 16px;
   font-family: monospace;
 }
@@ -212,7 +212,7 @@ pre {
 }
 
 #results {
-  background-color: rgb(230, 230, 230);
+  background-color: rgb(230 230 230);
   overflow-x: scroll;
   white-space: normal;
   font-size: 14px;
diff --git a/files/en-us/web/guide/css/block_formatting_context/index.md b/files/en-us/web/guide/css/block_formatting_context/index.md
index bf8c8898fa7b067..6911caef57cbcb7 100644
--- a/files/en-us/web/guide/css/block_formatting_context/index.md
+++ b/files/en-us/web/guide/css/block_formatting_context/index.md
@@ -99,7 +99,7 @@ section {
   float: left;
   width: 200px;
   height: 100px;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgb(255 255 255 / 50%);
   border: 1px solid black;
   padding: 10px;
 }
@@ -147,7 +147,7 @@ section {
   margin-right: 25px;
   width: 200px;
   height: 100px;
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: rgb(255 255 255 / 75%);
   border: 1px solid black;
   padding: 10px;
 }