diff --git a/docs/tutorial/window-customization.md b/docs/tutorial/window-customization.md
index 6f321588119f..1b013f426f13 100644
--- a/docs/tutorial/window-customization.md
+++ b/docs/tutorial/window-customization.md
@@ -115,7 +115,7 @@ const win = new BrowserWindow({
 })
 ```
 
-On either platform `titleBarOverlay` can also be an object. On both macOS and Windows, the height of the overlay can be specified with the `height` property. On Windows, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively.
+On either platform `titleBarOverlay` can also be an object. On both macOS and Windows, the height of the overlay can be specified with the `height` property. On Windows, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively. `rgba()`, `hsla()`, and `#RRGGBBAA` color formats are supported to apply transparency.
 
 If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:
 
@@ -136,10 +136,6 @@ const win = new BrowserWindow({
 > color and dimension values from a renderer using a set of readonly
 > [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
 
-### Limitations
-
-* Transparent colors are currently not supported. Progress updates for this feature can be found in PR [#33567](https://github.com/electron/electron/issues/33567).
-
 ## Create transparent windows
 
 By setting the `transparent` option to `true`, you can make a fully transparent window.
diff --git a/shell/browser/ui/views/win_caption_button_container.cc b/shell/browser/ui/views/win_caption_button_container.cc
index 99a7fc4bc057..004416dbecd6 100644
--- a/shell/browser/ui/views/win_caption_button_container.cc
+++ b/shell/browser/ui/views/win_caption_button_container.cc
@@ -13,6 +13,7 @@
 #include "shell/browser/ui/views/win_caption_button.h"
 #include "shell/browser/ui/views/win_frame_view.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/layer.h"
 #include "ui/strings/grit/ui_strings.h"
 #include "ui/views/background.h"
 #include "ui/views/layout/flex_layout.h"
@@ -129,9 +130,7 @@ void WinCaptionButtonContainer::AddedToWidget() {
   UpdateButtons();
 
   if (frame_view_->window()->IsWindowControlsOverlayEnabled()) {
-    SetBackground(views::CreateSolidBackground(
-        frame_view_->window()->overlay_button_color()));
-    SetPaintToLayer();
+    UpdateBackground();
   }
 }
 
@@ -146,6 +145,16 @@ void WinCaptionButtonContainer::OnWidgetBoundsChanged(
   UpdateButtons();
 }
 
+void WinCaptionButtonContainer::UpdateBackground() {
+  const SkColor bg_color = frame_view_->window()->overlay_button_color();
+  const SkAlpha theme_alpha = SkColorGetA(bg_color);
+  SetBackground(views::CreateSolidBackground(bg_color));
+  SetPaintToLayer();
+
+  if (theme_alpha < SK_AlphaOPAQUE)
+    layer()->SetFillsBoundsOpaquely(false);
+}
+
 void WinCaptionButtonContainer::UpdateButtons() {
   const bool is_maximized = frame_view_->frame()->IsMaximized();
   restore_button_->SetVisible(is_maximized);
diff --git a/shell/browser/ui/views/win_caption_button_container.h b/shell/browser/ui/views/win_caption_button_container.h
index 90c5973491c8..0c106dd8e425 100644
--- a/shell/browser/ui/views/win_caption_button_container.h
+++ b/shell/browser/ui/views/win_caption_button_container.h
@@ -41,6 +41,9 @@ class WinCaptionButtonContainer : public views::View,
   gfx::Size GetButtonSize() const;
   void SetButtonSize(gfx::Size size);
 
+  // Sets caption button container background color.
+  void UpdateBackground();
+
   // Sets caption button visibility and enabled state based on window state.
   // Only one of maximize or restore button should ever be visible at the same
   // time, and both are disabled in tablet UI mode.
diff --git a/shell/browser/ui/views/win_frame_view.cc b/shell/browser/ui/views/win_frame_view.cc
index 6e5cfe5b6b11..7525a5fd1c5e 100644
--- a/shell/browser/ui/views/win_frame_view.cc
+++ b/shell/browser/ui/views/win_frame_view.cc
@@ -59,8 +59,7 @@ void WinFrameView::InvalidateCaptionButtons() {
   if (!caption_button_container_)
     return;
 
-  caption_button_container_->SetBackground(
-      views::CreateSolidBackground(window()->overlay_button_color()));
+  caption_button_container_->UpdateBackground();
   caption_button_container_->InvalidateLayout();
   caption_button_container_->SchedulePaint();
 }