diff --git a/src/pages/blocks/superhero/centered/index.md b/src/pages/blocks/superhero/centered/index.md
index 2dc955d..5fc75ab 100644
--- a/src/pages/blocks/superhero/centered/index.md
+++ b/src/pages/blocks/superhero/centered/index.md
@@ -10,7 +10,7 @@ Centered hero used for Index home pages.
 ## Syntax
 
 ```markdown
-<Superhero slots="image, heading, text, buttons" variant="centered" textColor="white"/>
+<Superhero slots="image, heading, text, buttons" variant="centered" textColor="white" overGradient/>
 
 ![Hero image](../../../assets/hero.png)
 
@@ -33,8 +33,9 @@ This is a sample description text with an [inline link](https://example.com) for
   - `buttons` (optional)
 - **background**: Background color (default: `rgb(29, 125, 238)`)
 - **textColor**: Text color. Options: `black`, `white`, `gray`, `navy` (default: `white`)
+- **overGradient**: Improves button visibility over a gradient background
 
-<Superhero slots="image, heading, text, buttons" variant="centered" textColor="white"/>
+<Superhero slots="image, heading, text, buttons" variant="centered" textColor="white" overGradient/>
 
 ![Hero image](../../../assets/hero.png)
 
diff --git a/src/pages/blocks/superhero/centeredxl/index.md b/src/pages/blocks/superhero/centeredxl/index.md
index 0f6ce14..6d7801b 100644
--- a/src/pages/blocks/superhero/centeredxl/index.md
+++ b/src/pages/blocks/superhero/centeredxl/index.md
@@ -10,7 +10,7 @@ Extra-large centered hero used for Index home pages.
 ## Syntax
 
 ```markdown
-<Superhero slots="image, heading, text, buttons" variant="centeredXL" background="rgb(51, 51, 51)" />
+<Superhero slots="image, heading, text, buttons" variant="centeredXL" background="rgb(51, 51, 51)" overGradient/>
 
 ![Hero banner](../../../assets/hero.png)
 
@@ -33,8 +33,9 @@ This is a sample description text with an [inline link](https://example.com) for
   - `buttons` (optional)
 - **background**: Background color (default: `rgb(29, 125, 238)`)
 - **textColor**: Text color. Options: `black`, `white`, `gray`, `navy` (default: `white`)
+- **overGradient**: Improves button visibility over a gradient background
 
-<Superhero slots="image, heading, text, buttons" variant="centeredXL" background="rgb(51, 51, 51)" />
+<Superhero slots="image, heading, text, buttons" variant="centeredXL" background="rgb(51, 51, 51)" overGradient/>
 
 ![Hero banner](../../../assets/hero.png)