diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html
index 91a94d8b..0f2aca8a 100644
--- a/box-alignment/flexbox/auto-margins.html
+++ b/box-alignment/flexbox/auto-margins.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html
index 9624a4d3..26a1b75c 100644
--- a/box-alignment/flexbox/gap.html
+++ b/box-alignment/flexbox/gap.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html
index 7de4509f..91774e64 100644
--- a/box-alignment/overview/flex-align-items.html
+++ b/box-alignment/overview/flex-align-items.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html
index 79e7ab92..c45bf56c 100644
--- a/box-alignment/overview/grid-align-items.html
+++ b/box-alignment/overview/grid-align-items.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html
index ce77098b..b924ef1c 100644
--- a/box-alignment/overview/grid-gap.html
+++ b/box-alignment/overview/grid-gap.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html
index 1f22b167..217de84c 100644
--- a/display/multi-keyword/inline-block.html
+++ b/display/multi-keyword/inline-block.html
@@ -66,7 +66,7 @@
     </style>
     <style class="editable">
       .ib {
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgb(0 0 0 / 0.4);
         color: #fff;
         padding: 10px;
         display: inline-block;
@@ -84,7 +84,7 @@
     </section>
     <textarea class="playable-css" style="height: 180px">
 .ib {
-  background-color: rgba(0,0,0,.4);
+  background-color: rgb(0 0 0 / .4);
   color: #fff;
   padding: 10px;
   display: inline-block;
diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html
index 459a5ed1..59f687b6 100644
--- a/display/multi-keyword/inline-flex.html
+++ b/display/multi-keyword/inline-flex.html
@@ -62,7 +62,7 @@
       .flex > div {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html
index a351e5cf..512c5e34 100644
--- a/display/multi-keyword/multi-keyword-flex.html
+++ b/display/multi-keyword/multi-keyword-flex.html
@@ -67,7 +67,7 @@
       .flex > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/editable-samples-2/css/editable.css b/editable-samples-2/css/editable.css
index 85095d2a..1ca5c075 100644
--- a/editable-samples-2/css/editable.css
+++ b/editable-samples-2/css/editable.css
@@ -13,7 +13,7 @@ body {
   height: 200px;
   background-color: white;
   padding: 1em 0;
-  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 0.1);
 }
 
 #example-element {
@@ -49,7 +49,7 @@ body {
 .example-choice.selected {
   background-color: white;
   transition: background-color 0.2s ease-in;
-  box-shadow: inset 0px 2px 2px -2px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0px 2px 2px -2px rgb(0 0 0 / 0.2);
   cursor: text;
 }
 
diff --git a/editable-samples/codemirror/mode/css/less.html b/editable-samples/codemirror/mode/css/less.html
index 2298c662..8a740d8c 100644
--- a/editable-samples/codemirror/mode/css/less.html
+++ b/editable-samples/codemirror/mode/css/less.html
@@ -91,7 +91,7 @@ <h2>LESS mode</h2>
   .box-shadow(0, 1px, 8px, 0.6);
 
   &.docked {
-    background-color: hsla(210, 60%, 40%, 0.4);
+    background-color: hsl(210 60% 40% / 0.4);
   }
   &:hover {
     background-color: @blue;
diff --git a/editable-samples/css/editable.css b/editable-samples/css/editable.css
index eaeb94da..f6f7e6eb 100644
--- a/editable-samples/css/editable.css
+++ b/editable-samples/css/editable.css
@@ -13,10 +13,10 @@ body {
 }
 
 .CodeMirror {
-  box-shadow: inset 0px 2px 2px -2px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0px 2px 2px -2px rgb(0 0 0 / 0.2);
+  border: 1px solid rgb(0 0 0 / 0.2);
+  border-top: 1px solid rgb(0 0 0 / 0.3);
+  border-bottom: 1px solid rgb(0 0 0 / 0.1);
 }
 
 #editor {
@@ -41,5 +41,5 @@ body {
   background-color: white;
   padding: 1em;
   box-sizing: border-box;
-  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 0.1);
 }
diff --git a/flexbox/alignment/align-content-column.html b/flexbox/alignment/align-content-column.html
index 7b83b7de..85fec95f 100644
--- a/flexbox/alignment/align-content-column.html
+++ b/flexbox/alignment/align-content-column.html
@@ -69,7 +69,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         flex: 1 1 100px;
       }
     </style>
diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html
index 6c3038f1..e9ce451c 100644
--- a/flexbox/alignment/align-content.html
+++ b/flexbox/alignment/align-content.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         flex: 1 1 100px;
       }
     </style>
diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html
index 79607379..6a13714f 100644
--- a/flexbox/alignment/align-items.html
+++ b/flexbox/alignment/align-items.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html
index 7bb91c3a..918d54ff 100644
--- a/flexbox/alignment/align-self-column.html
+++ b/flexbox/alignment/align-self-column.html
@@ -70,7 +70,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html
index 911ce28c..4fdd31eb 100644
--- a/flexbox/alignment/align-self.html
+++ b/flexbox/alignment/align-self.html
@@ -70,7 +70,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html
index 91a94d8b..0f2aca8a 100644
--- a/flexbox/alignment/auto-margins.html
+++ b/flexbox/alignment/auto-margins.html
@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html
index 53609cfe..147ab171 100644
--- a/flexbox/alignment/intro.html
+++ b/flexbox/alignment/intro.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html
index 3b145e60..9e455cd4 100644
--- a/flexbox/alignment/justify-content-column.html
+++ b/flexbox/alignment/justify-content-column.html
@@ -71,7 +71,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html
index 387d5e87..14640c8b 100644
--- a/flexbox/alignment/justify-content-reverse.html
+++ b/flexbox/alignment/justify-content-reverse.html
@@ -71,7 +71,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html
index 55e86cce..07a51bb3 100644
--- a/flexbox/alignment/justify-content-writing-mode.html
+++ b/flexbox/alignment/justify-content-writing-mode.html
@@ -70,7 +70,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html
index 4ce1f66f..155ebd76 100644
--- a/flexbox/alignment/justify-content.html
+++ b/flexbox/alignment/justify-content.html
@@ -70,7 +70,7 @@
         padding: 20px;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html
index eb264d05..83c02ceb 100644
--- a/flexbox/basics/align-items.html
+++ b/flexbox/basics/align-items.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html
index 4913c819..0fd02cc2 100644
--- a/flexbox/basics/flex-direction.html
+++ b/flexbox/basics/flex-direction.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/basics/flex-flow.html b/flexbox/basics/flex-flow.html
index 0c32e35d..fb6e6ee0 100644
--- a/flexbox/basics/flex-flow.html
+++ b/flexbox/basics/flex-flow.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         width: 200px;
       }
 
diff --git a/flexbox/basics/flex-properties.html b/flexbox/basics/flex-properties.html
index e48e7947..39af58d5 100644
--- a/flexbox/basics/flex-properties.html
+++ b/flexbox/basics/flex-properties.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html
index f88a9f55..6566683b 100644
--- a/flexbox/basics/flex-shorthands.html
+++ b/flexbox/basics/flex-shorthands.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html
index 4abeaa05..6de90a3d 100644
--- a/flexbox/basics/flex-wrap.html
+++ b/flexbox/basics/flex-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         width: 200px;
       }
 
diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html
index 5d188c87..aba72e7f 100644
--- a/flexbox/basics/justify-content.html
+++ b/flexbox/basics/justify-content.html
@@ -67,7 +67,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html
index f85932ef..0d02b381 100644
--- a/flexbox/basics/simple-example-anon.html
+++ b/flexbox/basics/simple-example-anon.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 0;
       }
diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html
index c35bfd93..1d1e0ac7 100644
--- a/flexbox/basics/simple-example.html
+++ b/flexbox/basics/simple-example.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html
index 4348ceaf..b2b6c122 100644
--- a/flexbox/basics/the-flex-container.html
+++ b/flexbox/basics/the-flex-container.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html
index 5b42dfb8..47a9b4e1 100644
--- a/flexbox/browsers/float.html
+++ b/flexbox/browsers/float.html
@@ -73,7 +73,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html
index fee82b67..6c278e99 100644
--- a/flexbox/browsers/inline-block.html
+++ b/flexbox/browsers/inline-block.html
@@ -67,7 +67,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html
index 9308cc95..0e18ca4f 100644
--- a/flexbox/browsers/table-cell.html
+++ b/flexbox/browsers/table-cell.html
@@ -67,7 +67,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html
index fff18fa0..c252e760 100644
--- a/flexbox/browsers/vertical-align.html
+++ b/flexbox/browsers/vertical-align.html
@@ -67,7 +67,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html
index f5cb926b..595a3cbd 100644
--- a/flexbox/order/flex-direction.html
+++ b/flexbox/order/flex-direction.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/flexbox/order/negative-order.html b/flexbox/order/negative-order.html
index 678dc47e..894e5964 100644
--- a/flexbox/order/negative-order.html
+++ b/flexbox/order/negative-order.html
@@ -65,7 +65,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/flexbox/order/order.html b/flexbox/order/order.html
index 08c71c90..b2ec358b 100644
--- a/flexbox/order/order.html
+++ b/flexbox/order/order.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/flexbox/order/usecase-order.html b/flexbox/order/usecase-order.html
index 62f87ca0..07de26dd 100644
--- a/flexbox/order/usecase-order.html
+++ b/flexbox/order/usecase-order.html
@@ -70,7 +70,7 @@
       .card {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html
index a569820c..6766b04a 100644
--- a/flexbox/ratios/flex-basis.html
+++ b/flexbox/ratios/flex-basis.html
@@ -64,7 +64,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html
index d7e85941..1392fe59 100644
--- a/flexbox/ratios/flex-grow-ratios.html
+++ b/flexbox/ratios/flex-grow-ratios.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html
index c04cadae..60815ad8 100644
--- a/flexbox/ratios/flex-grow.html
+++ b/flexbox/ratios/flex-grow.html
@@ -64,7 +64,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html
index b23d7d07..2c7171e8 100644
--- a/flexbox/ratios/flex-shrink-min-content.html
+++ b/flexbox/ratios/flex-shrink-min-content.html
@@ -64,7 +64,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html
index 135e219a..f1a9e00e 100644
--- a/flexbox/ratios/flex-shrink-ratios.html
+++ b/flexbox/ratios/flex-shrink-ratios.html
@@ -64,7 +64,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html
index 5b2fa4af..f76189ff 100644
--- a/flexbox/ratios/flex-shrink.html
+++ b/flexbox/ratios/flex-shrink.html
@@ -64,7 +64,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html
index 766e9313..1005d9f5 100644
--- a/flexbox/relationship/display-contents.html
+++ b/flexbox/relationship/display-contents.html
@@ -66,7 +66,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html
index 07d6dfb0..ff04d29f 100644
--- a/flexbox/relationship/flex-layout.html
+++ b/flexbox/relationship/flex-layout.html
@@ -66,7 +66,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html
index 51115801..cd0562ff 100644
--- a/flexbox/relationship/floats.html
+++ b/flexbox/relationship/floats.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html
index 0d8cb3e3..2f8e854f 100644
--- a/flexbox/relationship/grid-layout.html
+++ b/flexbox/relationship/grid-layout.html
@@ -66,7 +66,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html
index 526a3df8..e77edc17 100644
--- a/flexbox/relationship/writing-modes.html
+++ b/flexbox/relationship/writing-modes.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html
index eac628a8..113cc126 100644
--- a/flexbox/use-cases/cards.html
+++ b/flexbox/use-cases/cards.html
@@ -75,7 +75,7 @@
       }
 
       .card footer {
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html
index c1c41a82..1c17abb1 100644
--- a/flexbox/use-cases/center.html
+++ b/flexbox/use-cases/center.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html
index 3a79cc74..355e00f5 100644
--- a/flexbox/use-cases/input-button.html
+++ b/flexbox/use-cases/input-button.html
@@ -79,7 +79,7 @@
         border-right: 1px solid rgb(96 139 168);
       }
       .wrapper input[type="submit"] {
-        background-color: rgba(96, 139, 168, 1);
+        background-color: rgb(96 139 168);
         color: #fff;
       }
     </style>
diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html
index 930b61b3..29d6f309 100644
--- a/flexbox/use-cases/label-input-button.html
+++ b/flexbox/use-cases/label-input-button.html
@@ -80,7 +80,7 @@
         border-right: 1px solid rgb(96 139 168);
       }
       .wrapper input[type="submit"] {
-        background-color: rgba(96, 139, 168, 1);
+        background-color: rgb(96 139 168);
         color: #fff;
       }
       .wrapper label {
diff --git a/flexbox/use-cases/navigation-flex.html b/flexbox/use-cases/navigation-flex.html
index def2adbf..169a9102 100644
--- a/flexbox/use-cases/navigation-flex.html
+++ b/flexbox/use-cases/navigation-flex.html
@@ -74,7 +74,7 @@
         color: #000;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html
index bfb7532e..76d7445f 100644
--- a/flexbox/use-cases/navigation.html
+++ b/flexbox/use-cases/navigation.html
@@ -74,7 +74,7 @@
         color: #000;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html
index 3c149b10..c61d6c39 100644
--- a/flexbox/use-cases/split-navigation.html
+++ b/flexbox/use-cases/split-navigation.html
@@ -74,7 +74,7 @@
         color: #000;
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/wrapping/column-wrap.html b/flexbox/wrapping/column-wrap.html
index a05f091d..93c4709f 100644
--- a/flexbox/wrapping/column-wrap.html
+++ b/flexbox/wrapping/column-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/flex-grid.html b/flexbox/wrapping/flex-grid.html
index 5b6e9210..b25d79c8 100644
--- a/flexbox/wrapping/flex-grid.html
+++ b/flexbox/wrapping/flex-grid.html
@@ -65,7 +65,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/gaps.html b/flexbox/wrapping/gaps.html
index ba000b18..2b646bc8 100644
--- a/flexbox/wrapping/gaps.html
+++ b/flexbox/wrapping/gaps.html
@@ -65,7 +65,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html
index 7e8605a2..6aca7158 100644
--- a/flexbox/wrapping/grid-example.html
+++ b/flexbox/wrapping/grid-example.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html
index 5e79e6ae..82877441 100644
--- a/flexbox/wrapping/row-reverse-wrap.html
+++ b/flexbox/wrapping/row-reverse-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html
index dd70ab29..5c29f085 100644
--- a/flexbox/wrapping/row-wrap.html
+++ b/flexbox/wrapping/row-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html
index dbaa9098..f42a9956 100644
--- a/flexbox/wrapping/visibility-collapse.html
+++ b/flexbox/wrapping/visibility-collapse.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html
index 5f37a70d..bd048cd6 100644
--- a/flexbox/wrapping/wrapped-visibility-collapse.html
+++ b/flexbox/wrapping/wrapped-visibility-collapse.html
@@ -68,7 +68,7 @@
       .box > * {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html
index 9959c038..8de41f74 100644
--- a/grid/subgrid/adding-line-names.html
+++ b/grid/subgrid/adding-line-names.html
@@ -49,7 +49,7 @@
       }
 
       .subitem2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         grid-column: sub-b / sub-d;
         grid-row: 1;
       }
@@ -88,7 +88,7 @@
 }
 
 .subitem2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   grid-column: sub-b / sub-d;
   grid-row: 1;
 }</textarea
diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html
index 2437c33e..fb3c7b4b 100644
--- a/grid/subgrid/gap.html
+++ b/grid/subgrid/gap.html
@@ -49,7 +49,7 @@
       }
 
       .subitem2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         grid-column: 2;
         grid-row: 1;
       }
@@ -89,7 +89,7 @@
 }
 
 .subitem2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   grid-column: 2;
   grid-row: 1;
 }</textarea
diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html
index 1adefa9f..3e83579e 100644
--- a/houdini/css_painting_api/example-boxbg.html
+++ b/houdini/css_painting_api/example-boxbg.html
@@ -7,16 +7,16 @@
     <style>
       li {
         background-image: paint(boxbg);
-        --boxColor: hsla(55, 90%, 60%, 1);
+        --boxColor: hsl(55 90% 60%);
       }
 
       li:nth-of-type(3n) {
-        --boxColor: hsla(155, 90%, 60%, 1);
+        --boxColor: hsl(155 90% 60%);
         --widthSubtractor: 20;
       }
 
       li:nth-of-type(3n + 1) {
-        --boxColor: hsla(255, 90%, 60%, 1);
+        --boxColor: hsl(255 90% 60%);
         --widthSubtractor: 40;
       }
     </style>
diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html
index 0633fa96..73465746 100644
--- a/howto/box-shadow-button.html
+++ b/howto/box-shadow-button.html
@@ -26,7 +26,7 @@
 
     <style class="editable">
       .shadow {
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8);
+        box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
       }
     </style>
   </head>
@@ -40,7 +40,7 @@
 
     <textarea class="playable playable-css" style="height: 100px">
 .shadow {
-  box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
+  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / .8);
 }</textarea
     >
 
diff --git a/howto/opacity.html b/howto/opacity.html
index 5e30a397..79766576 100644
--- a/howto/opacity.html
+++ b/howto/opacity.html
@@ -35,7 +35,7 @@
       }
 
       .box2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         color: #fff;
       }
     </style>
@@ -59,7 +59,7 @@
 }
 
 .box2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   color: #fff;
 }</textarea
     >
diff --git a/howto/text-shadow.html b/howto/text-shadow.html
index f41b61a6..8829e784 100644
--- a/howto/text-shadow.html
+++ b/howto/text-shadow.html
@@ -21,7 +21,7 @@
     <style class="editable">
       h1 {
         color: royalblue;
-        text-shadow: 2px 4px 4px rgba(46, 91, 173, 0.6);
+        text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
       }
     </style>
   </head>
@@ -36,7 +36,7 @@ <h1>Adding a shadow to text</h1>
     <textarea class="playable playable-css" style="height: 100px">
 h1 {
   color: royalblue;
-  text-shadow: 2px 4px 4px rgba(46,91,173,0.6);
+  text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
 }</textarea
     >
 
diff --git a/logical/border-longhands.html b/logical/border-longhands.html
index f2f77aaa..20cf6ac8 100644
--- a/logical/border-longhands.html
+++ b/logical/border-longhands.html
@@ -11,7 +11,7 @@
       }
       .box {
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         margin: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/float.html b/logical/float.html
index 9e729b1e..13abacf3 100644
--- a/logical/float.html
+++ b/logical/float.html
@@ -13,7 +13,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 10px;
         width: 100px;
diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html
index efe7ccb6..c90e0710 100644
--- a/logical/intro-feature-queries.html
+++ b/logical/intro-feature-queries.html
@@ -16,8 +16,8 @@
 
       .grid > * {
         border-radius: 5px;
-        border: 2px solid rgba(96, 139, 168, 0.4);
-        background-color: rgba(96, 139, 168, 0.2);
+        border: 2px solid rgb(96 139 168 / 0.4);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html
index 6d52be10..e72e3583 100644
--- a/logical/intro-grid-example.html
+++ b/logical/intro-grid-example.html
@@ -16,8 +16,8 @@
 
       .grid > * {
         border-radius: 5px;
-        border: 2px solid rgba(96, 139, 168, 0.4);
-        background-color: rgba(96, 139, 168, 0.2);
+        border: 2px solid rgb(96 139 168 / 0.4);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html
index 629d0201..a766ffd9 100644
--- a/logical/margin-longhands.html
+++ b/logical/margin-longhands.html
@@ -15,7 +15,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html
index 1a5a3dff..ae9697ef 100644
--- a/logical/padding-longhands.html
+++ b/logical/padding-longhands.html
@@ -12,7 +12,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         margin: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html
index e38df622..f531e36f 100644
--- a/logical/positioning-inset.html
+++ b/logical/positioning-inset.html
@@ -20,7 +20,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         width: 100px;
         height: 100px;
diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html
index a8d453dd..986c419a 100644
--- a/logical/size-inline-block.html
+++ b/logical/size-inline-block.html
@@ -12,7 +12,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-max.html b/logical/size-max.html
index 7e009a42..6055778d 100644
--- a/logical/size-max.html
+++ b/logical/size-max.html
@@ -12,7 +12,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-min.html b/logical/size-min.html
index 6335fe90..d87445d0 100644
--- a/logical/size-min.html
+++ b/logical/size-min.html
@@ -12,7 +12,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-resize.html b/logical/size-resize.html
index 511202b9..c176b977 100644
--- a/logical/size-resize.html
+++ b/logical/size-resize.html
@@ -12,7 +12,7 @@
       .box {
         border: 2px solid rgb(96 139 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
         margin: 10px;
         overflow: scroll;
diff --git a/modules/animation.html b/modules/animation.html
index 36611e87..be216cd2 100644
--- a/modules/animation.html
+++ b/modules/animation.html
@@ -141,7 +141,7 @@
         box-shadow:
           5px 15px 15px white,
           -5px 15px 15px white,
-          0 20px 20px rgba(125 125 125 / 0.5);
+          0 20px 20px rgb(125 125 125 / 0.5);
         animation:
           clouds ease 5s alternate infinite 0.2s,
           wind ease-out 4s alternate infinite;
diff --git a/modules/backgrounds.html b/modules/backgrounds.html
index 6f9923b0..8e74ac3d 100644
--- a/modules/backgrounds.html
+++ b/modules/backgrounds.html
@@ -33,10 +33,10 @@
           120px 120px;
         background-clip: content-box, content-box, padding-box;
         box-shadow:
-          inset 5px 5px 5px rgba(0, 0, 0, 0.4),
-          inset -5px -5px 5px rgba(0, 0, 0, 0.4),
-          5px 5px 5px rgba(0, 0, 0, 0.4),
-          -5px -5px 5px rgba(0, 0, 0, 0.4);
+          inset 5px 5px 5px rgb(0 0 0 / 0.4),
+          inset -5px -5px 5px rgb(0 0 0 / 0.4),
+          5px 5px 5px rgb(0 0 0 / 0.4),
+          -5px -5px 5px rgb(0 0 0 / 0.4);
       }
       div:first-of-type {
         border-radius: 0;
diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html
index 4f504989..b87c70e1 100644
--- a/overscroll-behavior/overscroll-behavior-x.html
+++ b/overscroll-behavior/overscroll-behavior-x.html
@@ -11,9 +11,9 @@
         background-color: magenta;
         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 / 0.5) 20px
         );
       }
 
@@ -33,15 +33,15 @@
         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 / 0.5) 20px
         );
       }
 
       p {
         padding: 10px;
-        background-color: rgba(255, 0, 0, 0.5);
+        background-color: rgb(255 0 0 / 0.5);
         margin: 0;
         width: 300px;
         position: relative;
diff --git a/path/offset-path.html b/path/offset-path.html
index 454cf8b8..16e88be8 100644
--- a/path/offset-path.html
+++ b/path/offset-path.html
@@ -67,7 +67,7 @@
       .parent {
         width: 200px;
         height: 200px;
-        border: 4px solid rgba(0, 0, 0, 0.1);
+        border: 4px solid rgb(0 0 0 / 0.1);
         border-radius: 50%;
         margin: 40px;
       }
@@ -96,7 +96,7 @@
 .parent {
   width: 200px;
   height: 200px;
-  border: 4px solid rgba(0,0,0,0.1);
+  border: 4px solid rgb(0 0 0 / 0.1);
   border-radius: 50%;
   margin: 40px;
 }
diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css
index df7c01f7..31e80ba9 100644
--- a/tools/border-image-generator/styles.css
+++ b/tools/border-image-generator/styles.css
@@ -477,7 +477,7 @@ body[data-move="Y"] {
 
 #remote-url:focus {
   box-shadow: 0px 0px 3px -1px #379b4a; /*#68ACE8; */
-  border-color: rgba(55, 155, 74, 0.5);
+  border-color: rgb(55 155 74 / 0.5);
   width: 450px;
 }
 
@@ -511,8 +511,8 @@ body[data-move="Y"] {
 }
 
 #subject .guideline {
-  background-color: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgb(255 255 255 / 0.7);
+  border: 1px solid rgb(0 0 0 / 0.3);
   position: absolute;
 }
 
diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css
index 9a77a67e..3cfffa96 100644
--- a/tools/box-shadow-generator/styles.css
+++ b/tools/box-shadow-generator/styles.css
@@ -671,11 +671,11 @@ body {
   margin: 5px;
   background: url("picker_mask_200.png");
   background:
-    -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-    -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    -moz-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%),
+    -moz-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%);
   background:
-    -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-    -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    -webkit-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%),
+    -webkit-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%);
   background-color: #f00;
   float: left;
 }
@@ -727,8 +727,8 @@ body {
   background: url("alpha_mask.png");
   background: -moz-linear-gradient(
     left,
-    rgba(255, 0, 0, 0) 0%,
-    rgba(255, 0, 0, 1) 100%
+    rgb(255 0 0 /  0) 0%,
+    rgb(255 0 0 /  1) 100%
   );
 }
 
diff --git a/tools/color-mixer/index.html b/tools/color-mixer/index.html
index d880f313..aa083eba 100644
--- a/tools/color-mixer/index.html
+++ b/tools/color-mixer/index.html
@@ -245,20 +245,20 @@ <h3>Color mixer</h3>
             },
           },
           swatches: [
-            "rgba(244, 67, 54, 1)",
-            "rgba(233, 30, 99, 1)",
-            "rgba(156, 39, 176, 1)",
-            "rgba(103, 58, 183, 1)",
-            "rgba(63, 81, 181, 1)",
-            "rgba(33, 150, 243, 1)",
-            "rgba(3, 169, 244, 1)",
-            "rgba(0, 188, 212, 1)",
-            "rgba(0, 150, 136, 1)",
-            "rgba(76, 175, 80, 1)",
-            "rgba(139, 195, 74, 1)",
-            "rgba(205, 220, 57, 1)",
-            "rgba(255, 235, 59, 1)",
-            "rgba(255, 193, 7, 1)",
+            "rgb(244 67 54)",
+            "rgb(233 30 99)",
+            "rgb(156 39 176)",
+            "rgb(103 58 183)",
+            "rgb(63 81 181)",
+            "rgb(33 150 243)",
+            "rgb(3 169 244)",
+            "rgb(0 188 212)",
+            "rgb(0 150 136)",
+            "rgb(76 175 80)",
+            "rgb(139 195 74)",
+            "rgb(205 220 57)",
+            "rgb(255 235 59)",
+            "rgb(255 193 7)",
           ],
         };