diff --git a/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
index ccf4f05..7e5828c 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
@@ -72,6 +72,61 @@
     <p><b>Message</b>: @fmessage?.ToString()</p>
 </FluentCard>
 
+<style>
+    .right-gradient {
+        --scroll-fade-next: var(--fill-color)
+    }
+
+    .both-gradient {
+        --scroll-fade-previous: var(--fill-color);
+        --scroll-fade-next: var(--fill-color);
+    }
+</style>
+
+<h4 class="mt-4">Gradients</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h5>Right gradient</h5>
+    <FluentHorizontalScroll Class="right-gradient" Speed="600"
+                            Easing="ScrollEasing.EaseInOut">
+        <FluentCard>Card number 1</FluentCard>
+        <FluentCard>Card number 2</FluentCard>
+        <FluentCard>Card number 3</FluentCard>
+        <FluentCard>Card number 4</FluentCard>
+        <FluentCard>Card number 5</FluentCard>
+        <FluentCard>Card number 6</FluentCard>
+        <FluentCard>Card number 7</FluentCard>
+        <FluentCard>Card number 8</FluentCard>
+        <FluentCard>Card number 9</FluentCard>
+        <FluentCard>Card number 10</FluentCard>
+        <FluentCard>Card number 11</FluentCard>
+        <FluentCard>Card number 12</FluentCard>
+        <FluentCard>Card number 13</FluentCard>
+        <FluentCard>Card number 14</FluentCard>
+        <FluentCard>Card number 15</FluentCard>
+        <FluentCard>Card number 16</FluentCard>
+    </FluentHorizontalScroll>
+    <h5>Right gradient</h5>
+    <FluentHorizontalScroll Class="both-gradient" Speed="600"
+                            Easing="ScrollEasing.EaseInOut">
+        <FluentCard>Card number 1</FluentCard>
+        <FluentCard>Card number 2</FluentCard>
+        <FluentCard>Card number 3</FluentCard>
+        <FluentCard>Card number 4</FluentCard>
+        <FluentCard>Card number 5</FluentCard>
+        <FluentCard>Card number 6</FluentCard>
+        <FluentCard>Card number 7</FluentCard>
+        <FluentCard>Card number 8</FluentCard>
+        <FluentCard>Card number 9</FluentCard>
+        <FluentCard>Card number 10</FluentCard>
+        <FluentCard>Card number 11</FluentCard>
+        <FluentCard>Card number 12</FluentCard>
+        <FluentCard>Card number 13</FluentCard>
+        <FluentCard>Card number 14</FluentCard>
+        <FluentCard>Card number 15</FluentCard>
+        <FluentCard>Card number 16</FluentCard>
+    </FluentHorizontalScroll>
+</FluentCard>
+
 @code {
     string? emessage;
     void OnEScrollStart(HorizontalScrollEventArgs args)