diff --git a/docs/guides/graphics-and-animation/gradients.md b/docs/guides/graphics-and-animation/gradients.md
new file mode 100644
index 000000000..f0cc96031
--- /dev/null
+++ b/docs/guides/graphics-and-animation/gradients.md
@@ -0,0 +1,179 @@
+---
+id: gradients
+title: How To Use Gradients
+---
+
+
+# How To Use Gradients
+
+This guide explains how to effectively use LinearGradientBrush in Avalonia to create beautiful gradient effects.
+
+## Basic Syntax
+A LinearGradientBrush is defined using the following basic structure:
+
+```xml
+
+
+
+
+```
+
+## Key Properties
+
+### StartPoint and EndPoint
+
+* Defines the direction of the gradient
+* Uses percentage values (e.g., "0%,0%") or decimal values (0,0)
+* Common patterns:
+ * Horizontal: StartPoint="0%,50%" EndPoint="100%,50%"
+ * Vertical: StartPoint="50%,0%" EndPoint="50%,100%"
+ * Diagonal: StartPoint="0%,0%" EndPoint="100%,100%"
+
+### GradientStop Elements
+
+* Define colors and their positions in the gradient
+* Properties:
+ * `Color`: The color value (Hex code or named color)
+ * `Offset`: Position in the gradient (0.0 to 1.0)
+
+## Common Gradient Patterns
+
+### 1. Simple Horizontal Gradient
+
+```xml
+
+
+
+
+```
+
+### 2. Multi-Color Gradient
+
+```xml
+
+
+
+
+
+
+```
+
+### 3. Vertical Gradient
+
+```xml
+
+
+
+
+```
+
+## Common Use Cases
+
+### Button Backgrounds
+
+```xml
+
+```
+
+### Panel Backgrounds
+
+```xml
+
+
+
+
+
+
+
+
+
+```
+
+## Example
+
+Below is the code to replicate the following sample.
+
+
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/sidebars.js b/sidebars.js
index 48c06990a..37ef56569 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -302,6 +302,7 @@ const sidebars = {
'guides/graphics-and-animation/how-to-use-icons',
'guides/graphics-and-animation/keyframe-animations',
'guides/graphics-and-animation/transitions',
+ 'guides/graphics-and-animation/gradients',
{
'type': 'category',
'label': 'Page Transitions',
diff --git a/static/img/guides/gradients/gradients.png b/static/img/guides/gradients/gradients.png
new file mode 100644
index 000000000..fdaf05251
Binary files /dev/null and b/static/img/guides/gradients/gradients.png differ