diff --git a/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp b/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
index 91673b6150..830a6533c8 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
+++ b/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <AK/QuickSort.h>
+#include <LibWeb/DOM/ExceptionOr.h>
 #include <LibWeb/HTML/CanvasGradient.h>
 
 namespace Web::HTML {
@@ -45,9 +47,29 @@ CanvasGradient::~CanvasGradient()
 {
 }
 
-void CanvasGradient::add_color_stop(double offset, String const& color)
+// https://html.spec.whatwg.org/multipage/canvas.html#dom-canvasgradient-addcolorstop
+DOM::ExceptionOr<void> CanvasGradient::add_color_stop(double offset, String const& color)
 {
-    dbgln("CanvasGradient#addColorStop({}, '{}')", offset, color);
+    // 1. If the offset is less than 0 or greater than 1, then throw an "IndexSizeError" DOMException.
+    if (offset < 0 || offset > 1)
+        return DOM::IndexSizeError::create("CanvasGradient color stop offset out of bounds");
+
+    // 2. Let parsed color be the result of parsing color.
+    auto parsed_color = Color::from_string(color);
+
+    // 3. If parsed color is failure, throw a "SyntaxError" DOMException.
+    if (!parsed_color.has_value())
+        return DOM::SyntaxError::create("Could not parse color for CanvasGradient");
+
+    // 4. Place a new stop on the gradient, at offset offset relative to the whole gradient, and with the color parsed color.
+    m_color_stops.append(ColorStop { offset, parsed_color.value() });
+
+    // FIXME: If multiple stops are added at the same offset on a gradient, then they must be placed in the order added,
+    //        with the first one closest to the start of the gradient, and each subsequent one infinitesimally further along
+    //        towards the end point (in effect causing all but the first and last stop added at each point to be ignored).
+    quick_sort(m_color_stops, [](auto& a, auto& b) { return a.offset < b.offset; });
+
+    return {};
 }
 
 }
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasGradient.h b/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
index 03e1e529d7..d748ba86a7 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
+++ b/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
@@ -7,6 +7,7 @@
 #pragma once
 
 #include <AK/RefCounted.h>
+#include <LibGfx/Color.h>
 #include <LibWeb/Bindings/Wrappable.h>
 
 namespace Web::HTML {
@@ -27,7 +28,7 @@ public:
     static NonnullRefPtr<CanvasGradient> create_linear(double x0, double y0, double x1, double y1);
     static NonnullRefPtr<CanvasGradient> create_conic(double start_angle, double x, double y);
 
-    void add_color_stop(double offset, String const& color);
+    DOM::ExceptionOr<void> add_color_stop(double offset, String const& color);
 
     ~CanvasGradient();
 
@@ -35,6 +36,13 @@ private:
     explicit CanvasGradient(Type);
 
     Type m_type {};
+
+    struct ColorStop {
+        double offset { 0 };
+        Gfx::Color color;
+    };
+
+    Vector<ColorStop> m_color_stops;
 };
 
 }