diff --git a/api/sixtyfps-cpp/include/sixtyfps_color.h b/api/sixtyfps-cpp/include/sixtyfps_color.h
index 064fa9a4f..13844dd20 100644
--- a/api/sixtyfps-cpp/include/sixtyfps_color.h
+++ b/api/sixtyfps-cpp/include/sixtyfps_color.h
@@ -155,6 +155,9 @@ public:
                       << ")";
     }
 
+    // FIXME: we need this to create GradientStop
+    operator const cbindgen_private::types::Color&() { return inner; }
+
 private:
     cbindgen_private::types::Color inner;
     friend class LinearGradientBrush;
diff --git a/sixtyfps_compiler/generator/cpp.rs b/sixtyfps_compiler/generator/cpp.rs
index 1914f1388..d98958c1c 100644
--- a/sixtyfps_compiler/generator/cpp.rs
+++ b/sixtyfps_compiler/generator/cpp.rs
@@ -1645,7 +1645,22 @@ fn compile_expression(
             "sixtyfps::EasingCurve(sixtyfps::EasingCurve::Tag::CubicBezier, {}, {}, {}, {})",
             a, b, c, d
         ),
-        Expression::LinearGradient{..} => todo!(),
+        Expression::LinearGradient{angle, stops} => {
+            let angle = compile_expression(angle, component);
+            let mut stops_it = stops.iter().map(|(color, stop)| {
+                let color = compile_expression(color, component);
+                let position = if matches!(stop, Expression::Invalid) {
+                    "std::numeric_limits<double>::quiet_NaN()".to_string()
+                } else {
+                    compile_expression(stop, component)
+                };
+                format!("sixtyfps::GradientStop{{ {}, {}, }}", color, position)
+            });
+            format!(
+                "[&] {{ const sixtyfps::GradientStop stops[] = {{ {} }}; return sixtyfps::LinearGradientBrush({}, stops, {}); }}()",
+                stops_it.join(", "), angle, stops.len()
+            )
+        }
         Expression::EnumerationValue(value) => {
             format!("sixtyfps::{}::{}", value.enumeration.name, value.to_string())
         }