diff --git a/src/main/kotlin/dev/blend/util/render/DrawUtil.kt b/src/main/kotlin/dev/blend/util/render/DrawUtil.kt
index 47bbe81..158297e 100644
--- a/src/main/kotlin/dev/blend/util/render/DrawUtil.kt
+++ b/src/main/kotlin/dev/blend/util/render/DrawUtil.kt
@@ -6,6 +6,7 @@ import dev.blend.util.IAccessor
 import dev.blend.util.misc.MiscUtil
 import kotlinx.io.IOException
 import org.lwjgl.nanovg.NVGColor
+import org.lwjgl.nanovg.NVGPaint
 import org.lwjgl.nanovg.NanoVG.*
 import org.lwjgl.nanovg.NanoVGGL3
 import org.lwjgl.opengl.GL11
@@ -92,7 +93,7 @@ object DrawUtil: IAccessor {
         nvgClosePath(context)
     }
     @JvmStatic
-    fun rectOutline(x: Number, y: Number, width: Number, height: Number, stroke: Number, color: Color, alignment: Alignment = Alignment.TOP_LEFT) {
+    fun rect(x: Number, y: Number, width: Number, height: Number, stroke: Number, color: Color, alignment: Alignment = Alignment.TOP_LEFT) {
         nvgBeginPath(context)
         NVGColor.calloc().use { nvgColor ->
             nvgRect(context, alignX(x, width, alignment), alignY(y, height, alignment), width.toFloat(), height.toFloat())
@@ -103,6 +104,41 @@ object DrawUtil: IAccessor {
         }
         nvgClosePath(context)
     }
+    @JvmStatic
+    fun rect(x: Number, y: Number, width: Number, height: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        nvgBeginPath(context)
+        NVGPaint.calloc().use { nvgPaint ->
+            nvgRect(context, alignX(x, width, alignment), alignY(y, height, alignment), width.toFloat(), height.toFloat())
+            NVGColor.calloc().use { primary ->
+                NVGColor.calloc().use { secondary ->
+                    nvgRGBAf(gradient.primary.red / 255f, gradient.primary.green / 255f, gradient.primary.blue / 255f, gradient.primary.alpha / 255f, primary)
+                    nvgRGBAf(gradient.secondary.red / 255f, gradient.secondary.green / 255f, gradient.secondary.blue / 255f, gradient.secondary.alpha / 255f, secondary)
+                    nvgLinearGradient(context, gradient.origin.x.toFloat(), gradient.origin.y.toFloat(), gradient.end.x.toFloat(), gradient.end.y.toFloat(), primary, secondary, nvgPaint)
+                }
+            }
+            nvgFillPaint(context, nvgPaint)
+            nvgFill(context)
+        }
+        nvgClosePath(context)
+    }
+    @JvmStatic
+    fun rect(x: Number, y: Number, width: Number, height: Number, stroke: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        nvgBeginPath(context)
+        NVGPaint.calloc().use { nvgPaint ->
+            nvgRect(context, alignX(x, width, alignment), alignY(y, height, alignment), width.toFloat(), height.toFloat())
+            NVGColor.calloc().use { primary ->
+                NVGColor.calloc().use { secondary ->
+                    nvgRGBAf(gradient.primary.red / 255f, gradient.primary.green / 255f, gradient.primary.blue / 255f, gradient.primary.alpha / 255f, primary)
+                    nvgRGBAf(gradient.secondary.red / 255f, gradient.secondary.green / 255f, gradient.secondary.blue / 255f, gradient.secondary.alpha / 255f, secondary)
+                    nvgLinearGradient(context, gradient.origin.x.toFloat(), gradient.origin.y.toFloat(), gradient.end.x.toFloat(), gradient.end.y.toFloat(), primary, secondary, nvgPaint)
+                }
+            }
+            nvgStrokeWidth(context, stroke.toFloat())
+            nvgStrokePaint(context, nvgPaint)
+            nvgStroke(context)
+        }
+        nvgClosePath(context)
+    }
 
     @JvmStatic
     fun roundedRect(x: Number, y: Number, width: Number, height: Number, radius: Number, color: Color, alignment: Alignment = Alignment.TOP_LEFT) {
@@ -116,6 +152,23 @@ object DrawUtil: IAccessor {
         nvgClosePath(context)
     }
     @JvmStatic
+    fun roundedRect(x: Number, y: Number, width: Number, height: Number, radius: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        nvgBeginPath(context)
+        NVGPaint.calloc().use { nvgPaint ->
+            nvgRoundedRect(context, alignX(x, width, alignment), alignY(y, height, alignment), width.toFloat(), height.toFloat(), radius.toFloat())
+            NVGColor.calloc().use { primary ->
+                NVGColor.calloc().use { secondary ->
+                    nvgRGBAf(gradient.primary.red / 255f, gradient.primary.green / 255f, gradient.primary.blue / 255f, gradient.primary.alpha / 255f, primary)
+                    nvgRGBAf(gradient.secondary.red / 255f, gradient.secondary.green / 255f, gradient.secondary.blue / 255f, gradient.secondary.alpha / 255f, secondary)
+                    nvgLinearGradient(context, gradient.origin.x.toFloat(), gradient.origin.y.toFloat(), gradient.end.x.toFloat(), gradient.end.y.toFloat(), primary, secondary, nvgPaint)
+                }
+            }
+            nvgFillPaint(context, nvgPaint)
+            nvgFill(context)
+        }
+        nvgClosePath(context)
+    }
+    @JvmStatic
     fun roundedRect(x: Number, y: Number, width: Number, height: Number, radius: Number, stroke: Number, color: Color, alignment: Alignment = Alignment.TOP_LEFT) {
         nvgBeginPath(context)
         NVGColor.calloc().use { nvgColor ->
@@ -128,6 +181,24 @@ object DrawUtil: IAccessor {
         nvgClosePath(context)
     }
     @JvmStatic
+    fun roundedRect(x: Number, y: Number, width: Number, height: Number, radius: Number, stroke: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        nvgBeginPath(context)
+        NVGPaint.calloc().use { nvgPaint ->
+            nvgRoundedRect(context, alignX(x, width, alignment), alignY(y, height, alignment), width.toFloat(), height.toFloat(), radius.toFloat())
+            NVGColor.calloc().use { primary ->
+                NVGColor.calloc().use { secondary ->
+                    nvgRGBAf(gradient.primary.red / 255f, gradient.primary.green / 255f, gradient.primary.blue / 255f, gradient.primary.alpha / 255f, primary)
+                    nvgRGBAf(gradient.secondary.red / 255f, gradient.secondary.green / 255f, gradient.secondary.blue / 255f, gradient.secondary.alpha / 255f, secondary)
+                    nvgLinearGradient(context, gradient.origin.x.toFloat(), gradient.origin.y.toFloat(), gradient.end.x.toFloat(), gradient.end.y.toFloat(), primary, secondary, nvgPaint)
+                }
+            }
+            nvgStrokeWidth(context, stroke.toFloat())
+            nvgStrokePaint(context, nvgPaint)
+            nvgStroke(context)
+        }
+        nvgClosePath(context)
+    }
+    @JvmStatic
     fun roundedRect(x: Number, y: Number, width: Number, height: Number, radius: DoubleArray, color: Color, alignment: Alignment = Alignment.TOP_LEFT) {
         if (radius.size != 4) {
             throw IllegalArgumentException("DoubleArray of size 4 required. only ${radius.size} found.")
@@ -160,6 +231,30 @@ object DrawUtil: IAccessor {
         }
         nvgClosePath(context)
     }
+
+    @JvmStatic
+    fun drawString(text: String?, x: Number, y: Number, size: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        drawString("regular", text!!, x, y, size, gradient, alignment)
+    }
+    @JvmStatic
+    fun drawString(font: String, text: String, x: Number, y: Number, size: Number, gradient: Gradient, alignment: Alignment = Alignment.TOP_LEFT) {
+        nvgBeginPath(context)
+        NVGPaint.calloc().use { nvgPaint ->
+            NVGColor.calloc().use { primary ->
+                NVGColor.calloc().use { secondary ->
+                    nvgRGBAf(gradient.primary.red / 255f, gradient.primary.green / 255f, gradient.primary.blue / 255f, gradient.primary.alpha / 255f, primary)
+                    nvgRGBAf(gradient.secondary.red / 255f, gradient.secondary.green / 255f, gradient.secondary.blue / 255f, gradient.secondary.alpha / 255f, secondary)
+                    nvgLinearGradient(context, gradient.origin.x.toFloat(), gradient.origin.y.toFloat(), gradient.end.x.toFloat(), gradient.end.y.toFloat(), primary, secondary, nvgPaint)
+                }
+            }
+            nvgFillPaint(context, nvgPaint)
+            nvgFontFace(context, font)
+            nvgFontSize(context, size.toFloat())
+            nvgTextAlign(context, getAlignFlags(alignment))
+            nvgText(context, x.toFloat(), y.toFloat(), text)
+        }
+        nvgClosePath(context)
+    }
     @JvmStatic
     fun getStringWidth(font: String, text: String, size: Number): Double {
         var width: Float
diff --git a/src/main/kotlin/dev/blend/util/render/Gradient.kt b/src/main/kotlin/dev/blend/util/render/Gradient.kt
new file mode 100644
index 0000000..7e7ecc0
--- /dev/null
+++ b/src/main/kotlin/dev/blend/util/render/Gradient.kt
@@ -0,0 +1,14 @@
+package dev.blend.util.render
+
+import dev.blend.util.IAccessor
+import net.minecraft.client.MinecraftClient
+import java.awt.Color
+
+class Gradient(
+    val primary: Color,
+    val secondary: Color,
+    var origin: Point = Point(0, 0),
+    var end: Point = Point(MinecraftClient.getInstance().window.width, MinecraftClient.getInstance().window.height)
+): IAccessor
+
+class Point(val x: Number, val y: Number)