diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index c04f194..b1a0e46 100644
--- a/desktop/sources/scripts/library.js
+++ b/desktop/sources/scripts/library.js
@@ -215,6 +215,12 @@ function Library (ronin) {
     return getComputedStyle(el).getPropertyValue(`--${variable}`)
   }
 
+  // Gradients
+
+  this.gradient = ([x1,y1,x2,y2], colors=['white','black']) => {
+    return ronin.surface.linearGradient(x1, y1, x2, y2, colors)
+  }
+
   // Pixels
 
   this.pixels = (rect, fn, q) => {
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index d1143e0..e7de660 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -61,6 +61,15 @@ function Surface (ronin) {
     context.closePath()
   }
 
+  this.linearGradient = function(x1, y1, x2, y2, colors, context = this.context) {
+    const gradient = context.createLinearGradient(x1, y1, x2, y2)
+    const step = 1/(colors.length - 1)
+    colors.forEach((color,i) => {
+      gradient.addColorStop(i*step, color)
+    })
+    return gradient
+  }
+
   // Tracers
 
   this.trace = function (shape, context) {
diff --git a/examples/gradient.lisp b/examples/gradient.lisp
new file mode 100644
index 0000000..b11e9aa
--- /dev/null
+++ b/examples/gradient.lisp
@@ -0,0 +1,16 @@
+(
+; gradients
+
+(clear)
+(fill 
+  (svg "M405,15 L405,15 L150,150 L195,90 L240,135 L120,195 L75,90 L135,165 L120,225 L90,240 L60,210 L90,150 L255,180 L285,180 L285,165 ")
+  (gradient 
+    (0 -50 600 175)
+    ("red" "orange" "blue" "green")))
+
+(stroke 
+  (svg "M255,60 L255,60 L135,180 L75,60 L195,210 L120,225 L105,225 L165,255 L225,195 L255,135 L285,150") 1
+  (gradient 
+    (50 0 180 0)
+    ("black" "white" "blue" "green")))
+)
\ No newline at end of file