Merge pull request #1448 from bungoboingo/fear/linear-gradients

Add linear gradient support to canvas widget

47 files changed, 2234 insertions, 971 deletions

diff --git a/Cargo.toml b/Cargo.toml
index f9b441a5..f7d578ba 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -69,10 +69,10 @@ members = [
     "examples/events",
     "examples/exit",
     "examples/game_of_life",
-    "examples/geometry",
     "examples/integration_opengl",
     "examples/integration_wgpu",
     "examples/lazy",
+    "examples/modern_art",
     "examples/multitouch",
     "examples/pane_grid",
     "examples/pick_list",
diff --git a/examples/arc/src/main.rs b/examples/arc/src/main.rs
index 0c619dc9..7b6ea0e1 100644
--- a/examples/arc/src/main.rs
+++ b/examples/arc/src/main.rs
@@ -2,7 +2,7 @@ use std::{f32::consts::PI, time::Instant};
 
 use iced::executor;
 use iced::widget::canvas::{
-    self, Cache, Canvas, Cursor, Geometry, Path, Stroke,
+    self, stroke, Cache, Canvas, Cursor, Geometry, Path, Stroke,
 };
 use iced::{
     Application, Command, Element, Length, Point, Rectangle, Settings,
@@ -52,11 +52,6 @@ impl Application for Arc {
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<Message> {
-        iced::time::every(std::time::Duration::from_millis(10))
-            .map(|_| Message::Tick)
-    }
-
     fn view(&self) -> Element<Message> {
         Canvas::new(self)
             .width(Length::Fill)
@@ -67,6 +62,11 @@ impl Application for Arc {
     fn theme(&self) -> Theme {
         Theme::Dark
     }
+
+    fn subscription(&self) -> Subscription<Message> {
+        iced::time::every(std::time::Duration::from_millis(10))
+            .map(|_| Message::Tick)
+    }
 }
 
 impl<Message> canvas::Program<Message> for Arc {
@@ -114,7 +114,7 @@ impl<Message> canvas::Program<Message> for Arc {
             frame.stroke(
                 &path,
                 Stroke {
-                    color: palette.text,
+                    style: stroke::Style::Solid(palette.text),
                     width: 10.0,
                     ..Stroke::default()
                 },
diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index 8818fb54..a389c54f 100644
--- a/examples/clock/src/main.rs
+++ b/examples/clock/src/main.rs
@@ -1,5 +1,7 @@
 use iced::executor;
-use iced::widget::canvas::{Cache, Cursor, Geometry, LineCap, Path, Stroke};
+use iced::widget::canvas::{
+    stroke, Cache, Cursor, Geometry, LineCap, Path, Stroke,
+};
 use iced::widget::{canvas, container};
 use iced::{
     Application, Color, Command, Element, Length, Point, Rectangle, Settings,
@@ -24,9 +26,9 @@ enum Message {
 }
 
 impl Application for Clock {
+    type Executor = executor::Default;
     type Message = Message;
     type Theme = Theme;
-    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
@@ -59,15 +61,6 @@ impl Application for Clock {
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<Message> {
-        iced::time::every(std::time::Duration::from_millis(500)).map(|_| {
-            Message::Tick(
-                time::OffsetDateTime::now_local()
-                    .unwrap_or_else(|_| time::OffsetDateTime::now_utc()),
-            )
-        })
-    }
-
     fn view(&self) -> Element<Message> {
         let canvas = canvas(self as &Self)
             .width(Length::Fill)
@@ -79,6 +72,15 @@ impl Application for Clock {
             .padding(20)
             .into()
     }
+
+    fn subscription(&self) -> Subscription<Message> {
+        iced::time::every(std::time::Duration::from_millis(500)).map(|_| {
+            Message::Tick(
+                time::OffsetDateTime::now_local()
+                    .unwrap_or_else(|_| time::OffsetDateTime::now_utc()),
+            )
+        })
+    }
 }
 
 impl<Message> canvas::Program<Message> for Clock {
@@ -104,33 +106,41 @@ impl<Message> canvas::Program<Message> for Clock {
             let long_hand =
                 Path::line(Point::ORIGIN, Point::new(0.0, -0.8 * radius));
 
-            let thin_stroke = Stroke {
-                width: radius / 100.0,
-                color: Color::WHITE,
-                line_cap: LineCap::Round,
-                ..Stroke::default()
+            let width = radius / 100.0;
+
+            let thin_stroke = || -> Stroke {
+                Stroke {
+                    width,
+                    style: stroke::Style::Solid(Color::WHITE),
+                    line_cap: LineCap::Round,
+                    ..Stroke::default()
+                }
             };
 
-            let wide_stroke = Stroke {
-                width: thin_stroke.width * 3.0,
-                ..thin_stroke
+            let wide_stroke = || -> Stroke {
+                Stroke {
+                    width: width * 3.0,
+                    style: stroke::Style::Solid(Color::WHITE),
+                    line_cap: LineCap::Round,
+                    ..Stroke::default()
+                }
             };
 
             frame.translate(Vector::new(center.x, center.y));
 
             frame.with_save(|frame| {
                 frame.rotate(hand_rotation(self.now.hour(), 12));
-                frame.stroke(&short_hand, wide_stroke);
+                frame.stroke(&short_hand, wide_stroke());
             });
 
             frame.with_save(|frame| {
                 frame.rotate(hand_rotation(self.now.minute(), 60));
-                frame.stroke(&long_hand, wide_stroke);
+                frame.stroke(&long_hand, wide_stroke());
             });
 
             frame.with_save(|frame| {
                 frame.rotate(hand_rotation(self.now.second(), 60));
-                frame.stroke(&long_hand, thin_stroke);
+                frame.stroke(&long_hand, thin_stroke());
             })
         });
 
diff --git a/examples/geometry/Cargo.toml b/examples/geometry/Cargo.toml
deleted file mode 100644
index 22ede0e0..00000000
--- a/examples/geometry/Cargo.toml
+++ /dev/null
@@ -1,11 +0,0 @@
-[package]
-name = "geometry"
-version = "0.1.0"
-authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
-edition = "2021"
-publish = false
-
-[dependencies]
-iced = { path = "../.." }
-iced_native = { path = "../../native" }
-iced_graphics = { path = "../../graphics" }
diff --git a/examples/geometry/README.md b/examples/geometry/README.md
deleted file mode 100644
index 4d5c81cb..00000000
--- a/examples/geometry/README.md
+++ /dev/null
@@ -1,18 +0,0 @@
-## Geometry
-
-A custom widget showcasing how to draw geometry with the `Mesh2D` primitive in [`iced_wgpu`](../../wgpu).
-
-The __[`main`]__ file contains all the code of the example.
-
-<div align="center">
-  <a href="https://gfycat.com/activeunfitkangaroo">
-    <img src="https://thumbs.gfycat.com/ActiveUnfitKangaroo-small.gif">
-  </a>
-</div>
-
-You can run it with `cargo run`:
-```
-cargo run --package geometry
-```
-
-[`main`]: src/main.rs
diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs
deleted file mode 100644
index d8b99ab3..00000000
--- a/examples/geometry/src/main.rs
+++ /dev/null
@@ -1,217 +0,0 @@
-//! This example showcases a simple native custom widget that renders using
-//! arbitrary low-level geometry.
-mod rainbow {
-    // For now, to implement a custom native widget you will need to add
-    // `iced_native` and `iced_wgpu` to your dependencies.
-    //
-    // Then, you simply need to define your widget type and implement the
-    // `iced_native::Widget` trait with the `iced_wgpu::Renderer`.
-    //
-    // Of course, you can choose to make the implementation renderer-agnostic,
-    // if you wish to, by creating your own `Renderer` trait, which could be
-    // implemented by `iced_wgpu` and other renderers.
-    use iced_graphics::renderer::{self, Renderer};
-    use iced_graphics::{Backend, Primitive};
-
-    use iced_native::widget::{self, Widget};
-    use iced_native::{
-        layout, Element, Layout, Length, Point, Rectangle, Size, Vector,
-    };
-
-    #[derive(Default)]
-    pub struct Rainbow;
-
-    impl Rainbow {
-        pub fn new() -> Self {
-            Self
-        }
-    }
-
-    pub fn rainbow() -> Rainbow {
-        Rainbow
-    }
-
-    impl<Message, B, T> Widget<Message, Renderer<B, T>> for Rainbow
-    where
-        B: Backend,
-    {
-        fn width(&self) -> Length {
-            Length::Fill
-        }
-
-        fn height(&self) -> Length {
-            Length::Shrink
-        }
-
-        fn layout(
-            &self,
-            _renderer: &Renderer<B, T>,
-            limits: &layout::Limits,
-        ) -> layout::Node {
-            let size = limits.width(Length::Fill).resolve(Size::ZERO);
-
-            layout::Node::new(Size::new(size.width, size.width))
-        }
-
-        fn draw(
-            &self,
-            _tree: &widget::Tree,
-            renderer: &mut Renderer<B, T>,
-            _theme: &T,
-            _style: &renderer::Style,
-            layout: Layout<'_>,
-            cursor_position: Point,
-            _viewport: &Rectangle,
-        ) {
-            use iced_graphics::triangle::{Mesh2D, Vertex2D};
-            use iced_native::Renderer as _;
-
-            let b = layout.bounds();
-
-            // R O Y G B I V
-            let color_r = [1.0, 0.0, 0.0, 1.0];
-            let color_o = [1.0, 0.5, 0.0, 1.0];
-            let color_y = [1.0, 1.0, 0.0, 1.0];
-            let color_g = [0.0, 1.0, 0.0, 1.0];
-            let color_gb = [0.0, 1.0, 0.5, 1.0];
-            let color_b = [0.0, 0.2, 1.0, 1.0];
-            let color_i = [0.5, 0.0, 1.0, 1.0];
-            let color_v = [0.75, 0.0, 0.5, 1.0];
-
-            let posn_center = {
-                if b.contains(cursor_position) {
-                    [cursor_position.x - b.x, cursor_position.y - b.y]
-                } else {
-                    [b.width / 2.0, b.height / 2.0]
-                }
-            };
-
-            let posn_tl = [0.0, 0.0];
-            let posn_t = [b.width / 2.0, 0.0];
-            let posn_tr = [b.width, 0.0];
-            let posn_r = [b.width, b.height / 2.0];
-            let posn_br = [b.width, b.height];
-            let posn_b = [(b.width / 2.0), b.height];
-            let posn_bl = [0.0, b.height];
-            let posn_l = [0.0, b.height / 2.0];
-
-            let mesh = Primitive::Mesh2D {
-                size: b.size(),
-                buffers: Mesh2D {
-                    vertices: vec![
-                        Vertex2D {
-                            position: posn_center,
-                            color: [1.0, 1.0, 1.0, 1.0],
-                        },
-                        Vertex2D {
-                            position: posn_tl,
-                            color: color_r,
-                        },
-                        Vertex2D {
-                            position: posn_t,
-                            color: color_o,
-                        },
-                        Vertex2D {
-                            position: posn_tr,
-                            color: color_y,
-                        },
-                        Vertex2D {
-                            position: posn_r,
-                            color: color_g,
-                        },
-                        Vertex2D {
-                            position: posn_br,
-                            color: color_gb,
-                        },
-                        Vertex2D {
-                            position: posn_b,
-                            color: color_b,
-                        },
-                        Vertex2D {
-                            position: posn_bl,
-                            color: color_i,
-                        },
-                        Vertex2D {
-                            position: posn_l,
-                            color: color_v,
-                        },
-                    ],
-                    indices: vec![
-                        0, 1, 2, // TL
-                        0, 2, 3, // T
-                        0, 3, 4, // TR
-                        0, 4, 5, // R
-                        0, 5, 6, // BR
-                        0, 6, 7, // B
-                        0, 7, 8, // BL
-                        0, 8, 1, // L
-                    ],
-                },
-            };
-
-            renderer.with_translation(Vector::new(b.x, b.y), |renderer| {
-                renderer.draw_primitive(mesh);
-            });
-        }
-    }
-
-    impl<'a, Message, B, T> From<Rainbow> for Element<'a, Message, Renderer<B, T>>
-    where
-        B: Backend,
-    {
-        fn from(rainbow: Rainbow) -> Self {
-            Self::new(rainbow)
-        }
-    }
-}
-
-use iced::widget::{column, container, scrollable};
-use iced::{Alignment, Element, Length, Sandbox, Settings};
-use rainbow::rainbow;
-
-pub fn main() -> iced::Result {
-    Example::run(Settings::default())
-}
-
-struct Example;
-
-impl Sandbox for Example {
-    type Message = ();
-
-    fn new() -> Self {
-        Example
-    }
-
-    fn title(&self) -> String {
-        String::from("Custom 2D geometry - Iced")
-    }
-
-    fn update(&mut self, _: ()) {}
-
-    fn view(&self) -> Element<()> {
-        let content = column![
-            rainbow(),
-            "In this example we draw a custom widget Rainbow, using \
-                 the Mesh2D primitive. This primitive supplies a list of \
-                 triangles, expressed as vertices and indices.",
-            "Move your cursor over it, and see the center vertex \
-                 follow you!",
-            "Every Vertex2D defines its own color. You could use the \
-                 Mesh2D primitive to render virtually any two-dimensional \
-                 geometry for your widget.",
-        ]
-        .padding(20)
-        .spacing(20)
-        .max_width(500)
-        .align_items(Alignment::Start);
-
-        let scrollable =
-            scrollable(container(content).width(Length::Fill).center_x());
-
-        container(scrollable)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_y()
-            .into()
-    }
-}
diff --git a/examples/modern_art/Cargo.toml b/examples/modern_art/Cargo.toml
new file mode 100644
index 00000000..a48361ae
--- /dev/null
+++ b/examples/modern_art/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "modern_art"
+version = "0.1.0"
+authors = ["Bingus <shankern@protonmail.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
+rand = "0.8.5"
diff --git a/examples/modern_art/src/main.rs b/examples/modern_art/src/main.rs
new file mode 100644
index 00000000..0dd21c74
--- /dev/null
+++ b/examples/modern_art/src/main.rs
@@ -0,0 +1,140 @@
+use iced::widget::canvas::{
+    self, gradient::Location, gradient::Position, Cache, Canvas, Cursor, Frame,
+    Geometry, Gradient,
+};
+use iced::{
+    executor, Application, Color, Command, Element, Length, Point, Rectangle,
+    Renderer, Settings, Size, Theme,
+};
+use rand::{thread_rng, Rng};
+
+fn main() -> iced::Result {
+    ModernArt::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    })
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {}
+
+struct ModernArt {
+    cache: Cache,
+}
+
+impl Application for ModernArt {
+    type Executor = executor::Default;
+    type Message = Message;
+    type Theme = Theme;
+    type Flags = ();
+
+    fn new(_flags: Self::Flags) -> (Self, Command<Self::Message>) {
+        (
+            ModernArt {
+                cache: Default::default(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        String::from("Modern Art")
+    }
+
+    fn update(&mut self, _message: Message) -> Command<Message> {
+        Command::none()
+    }
+
+    fn view(&self) -> Element<'_, Self::Message, Renderer<Self::Theme>> {
+        Canvas::new(self)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .into()
+    }
+}
+
+impl<Message> canvas::Program<Message> for ModernArt {
+    type State = ();
+
+    fn draw(
+        &self,
+        _state: &Self::State,
+        _theme: &Theme,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<Geometry> {
+        let geometry = self.cache.draw(bounds.size(), |frame| {
+            let num_squares = thread_rng().gen_range(0..1200);
+
+            let mut i = 0;
+            while i <= num_squares {
+                generate_box(frame, bounds.size());
+                i += 1;
+            }
+        });
+
+        vec![geometry]
+    }
+}
+
+fn random_direction() -> Location {
+    match thread_rng().gen_range(0..8) {
+        0 => Location::TopLeft,
+        1 => Location::Top,
+        2 => Location::TopRight,
+        3 => Location::Right,
+        4 => Location::BottomRight,
+        5 => Location::Bottom,
+        6 => Location::BottomLeft,
+        7 => Location::Left,
+        _ => Location::TopLeft,
+    }
+}
+
+fn generate_box(frame: &mut Frame, bounds: Size) -> bool {
+    let solid = rand::random::<bool>();
+
+    let random_color = || -> Color {
+        Color::from_rgb(
+            thread_rng().gen_range(0.0..1.0),
+            thread_rng().gen_range(0.0..1.0),
+            thread_rng().gen_range(0.0..1.0),
+        )
+    };
+
+    let gradient = |top_left: Point, size: Size| -> Gradient {
+        let mut builder = Gradient::linear(Position::Relative {
+            top_left,
+            size,
+            start: random_direction(),
+            end: random_direction(),
+        });
+        let stops = thread_rng().gen_range(1..15u32);
+
+        let mut i = 0;
+        while i <= stops {
+            builder = builder.add_stop(i as f32 / stops as f32, random_color());
+            i += 1;
+        }
+
+        builder.build().unwrap()
+    };
+
+    let top_left = Point::new(
+        thread_rng().gen_range(0.0..bounds.width),
+        thread_rng().gen_range(0.0..bounds.height),
+    );
+
+    let size = Size::new(
+        thread_rng().gen_range(50.0..200.0),
+        thread_rng().gen_range(50.0..200.0),
+    );
+
+    if solid {
+        frame.fill_rectangle(top_left, size, random_color());
+    } else {
+        frame.fill_rectangle(top_left, size, gradient(top_left, size));
+    };
+
+    solid
+}
diff --git a/examples/multitouch/src/main.rs b/examples/multitouch/src/main.rs
index 0345ceb7..f5faae0f 100644
--- a/examples/multitouch/src/main.rs
+++ b/examples/multitouch/src/main.rs
@@ -2,7 +2,8 @@
 //! a circle around each fingertip. This only works on touch-enabled
 //! computers like Microsoft Surface.
 use iced::widget::canvas::event;
-use iced::widget::canvas::{self, Canvas, Cursor, Geometry, Stroke};
+use iced::widget::canvas::stroke::{self, Stroke};
+use iced::widget::canvas::{self, Canvas, Cursor, Geometry};
 use iced::{
     executor, touch, window, Application, Color, Command, Element, Length,
     Point, Rectangle, Settings, Subscription, Theme,
@@ -186,7 +187,7 @@ impl canvas::Program<Message> for State {
                 frame.stroke(
                     &path,
                     Stroke {
-                        color: Color::BLACK,
+                        style: stroke::Style::Solid(Color::BLACK),
                         width: 3.0,
                         ..Stroke::default()
                     },
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index c59d73a8..56787a99 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -11,7 +11,9 @@ use iced::executor;
 use iced::theme::{self, Theme};
 use iced::time;
 use iced::widget::canvas;
-use iced::widget::canvas::{Cursor, Path, Stroke};
+use iced::widget::canvas::gradient::{self, Gradient};
+use iced::widget::canvas::stroke::{self, Stroke};
+use iced::widget::canvas::{Cursor, Path};
 use iced::window;
 use iced::{
     Application, Color, Command, Element, Length, Point, Rectangle, Settings,
@@ -37,9 +39,9 @@ enum Message {
 }
 
 impl Application for SolarSystem {
+    type Executor = executor::Default;
     type Message = Message;
     type Theme = Theme;
-    type Executor = executor::Default;
     type Flags = ();
 
     fn new(_flags: ()) -> (Self, Command<Message>) {
@@ -65,10 +67,6 @@ impl Application for SolarSystem {
         Command::none()
     }
 
-    fn subscription(&self) -> Subscription<Message> {
-        time::every(std::time::Duration::from_millis(10)).map(Message::Tick)
-    }
-
     fn view(&self) -> Element<Message> {
         canvas(&self.state)
             .width(Length::Fill)
@@ -86,6 +84,10 @@ impl Application for SolarSystem {
             text_color: Color::WHITE,
         })
     }
+
+    fn subscription(&self) -> Subscription<Message> {
+        time::every(time::Duration::from_millis(10)).map(Message::Tick)
+    }
 }
 
 #[derive(Debug)]
@@ -178,8 +180,10 @@ impl<Message> canvas::Program<Message> for State {
             frame.stroke(
                 &orbit,
                 Stroke {
+                    style: stroke::Style::Solid(Color::from_rgba8(
+                        0, 153, 255, 0.1,
+                    )),
                     width: 1.0,
-                    color: Color::from_rgba8(0, 153, 255, 0.1),
                     line_dash: canvas::LineDash {
                         offset: 0,
                         segments: &[3.0, 6.0],
@@ -198,15 +202,18 @@ impl<Message> canvas::Program<Message> for State {
                 frame.translate(Vector::new(Self::ORBIT_RADIUS, 0.0));
 
                 let earth = Path::circle(Point::ORIGIN, Self::EARTH_RADIUS);
-                let shadow = Path::rectangle(
-                    Point::new(0.0, -Self::EARTH_RADIUS),
-                    Size::new(
-                        Self::EARTH_RADIUS * 4.0,
-                        Self::EARTH_RADIUS * 2.0,
-                    ),
-                );
 
-                frame.fill(&earth, Color::from_rgb8(0x6B, 0x93, 0xD6));
+                let earth_fill =
+                    Gradient::linear(gradient::Position::Absolute {
+                        start: Point::new(-Self::EARTH_RADIUS, 0.0),
+                        end: Point::new(Self::EARTH_RADIUS, 0.0),
+                    })
+                    .add_stop(0.2, Color::from_rgb(0.15, 0.50, 1.0))
+                    .add_stop(0.8, Color::from_rgb(0.0, 0.20, 0.47))
+                    .build()
+                    .expect("Build Earth fill gradient");
+
+                frame.fill(&earth, earth_fill);
 
                 frame.with_save(|frame| {
                     frame.rotate(rotation * 10.0);
@@ -215,14 +222,6 @@ impl<Message> canvas::Program<Message> for State {
                     let moon = Path::circle(Point::ORIGIN, Self::MOON_RADIUS);
                     frame.fill(&moon, Color::WHITE);
                 });
-
-                frame.fill(
-                    &shadow,
-                    Color {
-                        a: 0.7,
-                        ..Color::BLACK
-                    },
-                );
             });
         });
 
diff --git a/glow/src/backend.rs b/glow/src/backend.rs
index 78d4229e..21af2ecf 100644
--- a/glow/src/backend.rs
+++ b/glow/src/backend.rs
@@ -1,7 +1,6 @@
-use crate::program;
 use crate::quad;
 use crate::text;
-use crate::triangle;
+use crate::{program, triangle};
 use crate::{Settings, Transformation, Viewport};
 
 use iced_graphics::backend;
@@ -105,11 +104,11 @@ impl Backend {
                 * Transformation::scale(scale_factor, scale_factor);
 
             self.triangle_pipeline.draw(
+                &layer.meshes,
                 gl,
                 target_height,
                 scaled,
                 scale_factor,
-                &layer.meshes,
             );
         }
 
diff --git a/glow/src/quad/compatibility.rs b/glow/src/quad/compatibility.rs
index eb3fb7e0..28a5ea7c 100644
--- a/glow/src/quad/compatibility.rs
+++ b/glow/src/quad/compatibility.rs
@@ -70,11 +70,10 @@ impl Pipeline {
         unsafe {
             gl.use_program(Some(program));
 
-            let matrix: [f32; 16] = Transformation::identity().into();
             gl.uniform_matrix_4_f32_slice(
                 Some(&transform_location),
                 false,
-                &matrix,
+                Transformation::identity().as_ref(),
             );
 
             gl.uniform_1_f32(Some(&scale_location), 1.0);
@@ -139,11 +138,10 @@ impl Pipeline {
 
         if transformation != self.current_transform {
             unsafe {
-                let matrix: [f32; 16] = transformation.into();
                 gl.uniform_matrix_4_f32_slice(
                     Some(&self.transform_location),
                     false,
-                    &matrix,
+                    transformation.as_ref(),
                 );
 
                 self.current_transform = transformation;
diff --git a/glow/src/quad/core.rs b/glow/src/quad/core.rs
index 3e51b1ca..16bec385 100644
--- a/glow/src/quad/core.rs
+++ b/glow/src/quad/core.rs
@@ -65,11 +65,10 @@ impl Pipeline {
         unsafe {
             gl.use_program(Some(program));
 
-            let matrix: [f32; 16] = Transformation::identity().into();
             gl.uniform_matrix_4_f32_slice(
                 Some(&transform_location),
                 false,
-                &matrix,
+                Transformation::identity().as_ref(),
             );
 
             gl.uniform_1_f32(Some(&scale_location), 1.0);
@@ -119,11 +118,10 @@ impl Pipeline {
 
         if transformation != self.current_transform {
             unsafe {
-                let matrix: [f32; 16] = transformation.into();
                 gl.uniform_matrix_4_f32_slice(
                     Some(&self.transform_location),
                     false,
-                    &matrix,
+                    transformation.as_ref(),
                 );
 
                 self.current_transform = transformation;
diff --git a/glow/src/shader/common/gradient.frag b/glow/src/shader/common/gradient.frag
new file mode 100644
index 00000000..42d0201f
--- /dev/null
+++ b/glow/src/shader/common/gradient.frag
@@ -0,0 +1,59 @@
+#ifdef GL_ES
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+        precision highp float;
+    #else
+        precision mediump float;
+    #endif
+#endif
+
+#ifdef HIGHER_THAN_300
+    layout (location = 0) out vec4 fragColor;
+    #define gl_FragColor fragColor
+#endif
+
+in vec2 raw_position;
+
+uniform vec4 gradient_direction;
+uniform uint color_stops_size;
+// GLSL does not support dynamically sized arrays without SSBOs so this is capped to 16 stops
+//stored as color(vec4) -> offset(vec4) sequentially;
+uniform vec4 color_stops[32];
+
+//TODO: rewrite without branching to make ALUs happy
+void main() {
+    vec2 start = gradient_direction.xy;
+    vec2 end = gradient_direction.zw;
+    vec2 gradient_vec = vec2(end - start);
+    vec2 current_vec = vec2(raw_position.xy - start);
+    vec2 unit = normalize(gradient_vec);
+    float coord_offset = dot(unit, current_vec) / length(gradient_vec);
+    //if a gradient has a start/end stop that is identical, the mesh will have a transparent fill
+    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
+
+    float min_offset = color_stops[1].x;
+    float max_offset = color_stops[color_stops_size - 1u].x;
+
+    for (uint i = 0u; i < color_stops_size - 2u; i += 2u) {
+        float curr_offset = color_stops[i+1u].x;
+        float next_offset = color_stops[i+3u].x;
+
+        if (coord_offset <= min_offset) {
+            //current coordinate is before the first defined offset, set it to the start color
+            fragColor = color_stops[0];
+        }
+
+        if (curr_offset <= coord_offset && coord_offset <= next_offset) {
+            //current fragment is between the current offset processing & the next one, interpolate colors
+            fragColor = mix(color_stops[i], color_stops[i+2u], smoothstep(
+                curr_offset,
+                next_offset,
+                coord_offset
+            ));
+        }
+
+        if (coord_offset >= max_offset) {
+            //current coordinate is before the last defined offset, set it to the last color
+            fragColor = color_stops[color_stops_size - 2u];
+        }
+    }
+}
diff --git a/glow/src/shader/common/triangle.frag b/glow/src/shader/common/triangle.frag
index e8689f2e..ead40fe5 100644
--- a/glow/src/shader/common/triangle.frag
+++ b/glow/src/shader/common/triangle.frag
@@ -11,8 +11,8 @@ out vec4 fragColor;
 #define gl_FragColor fragColor
 #endif
 
-in vec4 v_Color;
+uniform vec4 color;
 
 void main() {
-    gl_FragColor = v_Color;
-}
\ No newline at end of file
+    fragColor = color;
+}
diff --git a/glow/src/shader/common/triangle.vert b/glow/src/shader/common/triangle.vert
index d0494a5f..fe505997 100644
--- a/glow/src/shader/common/triangle.vert
+++ b/glow/src/shader/common/triangle.vert
@@ -1,11 +1,9 @@
 uniform mat4 u_Transform;
 
 in vec2 i_Position;
-in vec4 i_Color;
-
-out vec4 v_Color;
+out vec2 raw_position;
 
 void main() {
     gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0);
-    v_Color = i_Color;
-}
\ No newline at end of file
+    raw_position = i_Position;
+}
diff --git a/glow/src/triangle.rs b/glow/src/triangle.rs
index ae4f83ef..0e27bcf2 100644
--- a/glow/src/triangle.rs
+++ b/glow/src/triangle.rs
@@ -1,66 +1,32 @@
 //! Draw meshes of triangles.
-use crate::program::{self, Shader};
+mod gradient;
+mod solid;
+
+use crate::program;
 use crate::Transformation;
-use glow::HasContext;
-use iced_graphics::layer;
-use std::marker::PhantomData;
 
-pub use iced_graphics::triangle::{Mesh2D, Vertex2D};
+use iced_graphics::layer::mesh::{self, Mesh};
+use iced_graphics::triangle::{self, Vertex2D};
 
-const VERTEX_BUFFER_SIZE: usize = 10_000;
-const INDEX_BUFFER_SIZE: usize = 10_000;
+use glow::HasContext;
+use std::marker::PhantomData;
 
 #[derive(Debug)]
 pub(crate) struct Pipeline {
-    program: <glow::Context as HasContext>::Program,
     vertex_array: <glow::Context as HasContext>::VertexArray,
     vertices: Buffer<Vertex2D>,
     indices: Buffer<u32>,
-    transform_location: <glow::Context as HasContext>::UniformLocation,
-    current_transform: Transformation,
+    programs: ProgramList,
 }
 
-impl Pipeline {
-    pub fn new(
-        gl: &glow::Context,
-        shader_version: &program::Version,
-    ) -> Pipeline {
-        let program = unsafe {
-            let vertex_shader = Shader::vertex(
-                gl,
-                shader_version,
-                include_str!("shader/common/triangle.vert"),
-            );
-            let fragment_shader = Shader::fragment(
-                gl,
-                shader_version,
-                include_str!("shader/common/triangle.frag"),
-            );
-
-            program::create(
-                gl,
-                &[vertex_shader, fragment_shader],
-                &[(0, "i_Position"), (1, "i_Color")],
-            )
-        };
-
-        let transform_location =
-            unsafe { gl.get_uniform_location(program, "u_Transform") }
-                .expect("Get transform location");
-
-        unsafe {
-            gl.use_program(Some(program));
-
-            let transform: [f32; 16] = Transformation::identity().into();
-            gl.uniform_matrix_4_f32_slice(
-                Some(&transform_location),
-                false,
-                &transform,
-            );
-
-            gl.use_program(None);
-        }
+#[derive(Debug)]
+struct ProgramList {
+    solid: solid::Program,
+    gradient: gradient::Program,
+}
 
+impl Pipeline {
+    pub fn new(gl: &glow::Context, shader_version: &program::Version) -> Self {
         let vertex_array =
             unsafe { gl.create_vertex_array().expect("Create vertex array") };
 
@@ -73,7 +39,7 @@ impl Pipeline {
                 gl,
                 glow::ARRAY_BUFFER,
                 glow::DYNAMIC_DRAW,
-                VERTEX_BUFFER_SIZE,
+                std::mem::size_of::<Vertex2D>() as usize,
             )
         };
 
@@ -82,7 +48,7 @@ impl Pipeline {
                 gl,
                 glow::ELEMENT_ARRAY_BUFFER,
                 glow::DYNAMIC_DRAW,
-                INDEX_BUFFER_SIZE,
+                std::mem::size_of::<u32>() as usize,
             )
         };
 
@@ -92,83 +58,63 @@ impl Pipeline {
             gl.enable_vertex_attrib_array(0);
             gl.vertex_attrib_pointer_f32(0, 2, glow::FLOAT, false, stride, 0);
 
-            gl.enable_vertex_attrib_array(1);
-            gl.vertex_attrib_pointer_f32(
-                1,
-                4,
-                glow::FLOAT,
-                false,
-                stride,
-                4 * 2,
-            );
-
             gl.bind_vertex_array(None);
-        }
+        };
 
-        Pipeline {
-            program,
+        Self {
             vertex_array,
             vertices,
             indices,
-            transform_location,
-            current_transform: Transformation::identity(),
+            programs: ProgramList {
+                solid: solid::Program::new(gl, shader_version),
+                gradient: gradient::Program::new(gl, shader_version),
+            },
         }
     }
 
     pub fn draw(
         &mut self,
+        meshes: &[Mesh<'_>],
         gl: &glow::Context,
         target_height: u32,
         transformation: Transformation,
         scale_factor: f32,
-        meshes: &[layer::Mesh<'_>],
     ) {
         unsafe {
             gl.enable(glow::MULTISAMPLE);
             gl.enable(glow::SCISSOR_TEST);
-            gl.use_program(Some(self.program));
-            gl.bind_vertex_array(Some(self.vertex_array));
+            gl.bind_vertex_array(Some(self.vertex_array))
         }
 
-        // This looks a bit crazy, but we are just counting how many vertices
-        // and indices we will need to handle.
-        // TODO: Improve readability
-        let (total_vertices, total_indices) = meshes
-            .iter()
-            .map(|layer::Mesh { buffers, .. }| {
-                (buffers.vertices.len(), buffers.indices.len())
-            })
-            .fold((0, 0), |(total_v, total_i), (v, i)| {
-                (total_v + v, total_i + i)
-            });
-
-        // Then we ensure the current buffers are big enough, resizing if
-        // necessary
+        //count the total amount of vertices & indices we need to handle
+        let (total_vertices, total_indices) = mesh::attribute_count_of(meshes);
+
+        // Then we ensure the current attribute buffers are big enough, resizing if necessary
         unsafe {
             self.vertices.bind(gl, total_vertices);
             self.indices.bind(gl, total_indices);
         }
 
         // We upload all the vertices and indices upfront
-        let mut last_vertex = 0;
-        let mut last_index = 0;
+        let mut vertex_offset = 0;
+        let mut index_offset = 0;
 
-        for layer::Mesh { buffers, .. } in meshes {
+        for mesh in meshes {
             unsafe {
                 gl.buffer_sub_data_u8_slice(
                     glow::ARRAY_BUFFER,
-                    (last_vertex * std::mem::size_of::<Vertex2D>()) as i32,
-                    bytemuck::cast_slice(&buffers.vertices),
+                    (vertex_offset * std::mem::size_of::<Vertex2D>()) as i32,
+                    bytemuck::cast_slice(&mesh.buffers.vertices),
                 );
 
                 gl.buffer_sub_data_u8_slice(
                     glow::ELEMENT_ARRAY_BUFFER,
-                    (last_index * std::mem::size_of::<u32>()) as i32,
-                    bytemuck::cast_slice(&buffers.indices),
+                    (index_offset * std::mem::size_of::<u32>()) as i32,
+                    bytemuck::cast_slice(&mesh.buffers.indices),
                 );
 
-                last_vertex += buffers.vertices.len();
-                last_index += buffers.indices.len();
+                vertex_offset += mesh.buffers.vertices.len();
+                index_offset += mesh.buffers.indices.len();
             }
         }
 
@@ -176,29 +122,13 @@ impl Pipeline {
         let mut last_vertex = 0;
         let mut last_index = 0;
 
-        for layer::Mesh {
-            buffers,
-            origin,
-            clip_bounds,
-        } in meshes
-        {
-            let transform =
-                transformation * Transformation::translate(origin.x, origin.y);
+        for mesh in meshes {
+            let transform = transformation
+                * Transformation::translate(mesh.origin.x, mesh.origin.y);
 
-            let clip_bounds = (*clip_bounds * scale_factor).snap();
+            let clip_bounds = (mesh.clip_bounds * scale_factor).snap();
 
             unsafe {
-                if self.current_transform != transform {
-                    let matrix: [f32; 16] = transform.into();
-                    gl.uniform_matrix_4_f32_slice(
-                        Some(&self.transform_location),
-                        false,
-                        &matrix,
-                    );
-
-                    self.current_transform = transform;
-                }
-
                 gl.scissor(
                     clip_bounds.x as i32,
                     (target_height - (clip_bounds.y + clip_bounds.height))
@@ -207,50 +137,74 @@ impl Pipeline {
                     clip_bounds.height as i32,
                 );
 
+                match mesh.style {
+                    triangle::Style::Solid(color) => {
+                        self.programs.solid.use_program(gl, color, &transform);
+                    }
+                    triangle::Style::Gradient(gradient) => {
+                        self.programs
+                            .gradient
+                            .use_program(gl, gradient, &transform);
+                    }
+                }
+
                 gl.draw_elements_base_vertex(
                     glow::TRIANGLES,
-                    buffers.indices.len() as i32,
+                    mesh.buffers.indices.len() as i32,
                     glow::UNSIGNED_INT,
                     (last_index * std::mem::size_of::<u32>()) as i32,
                     last_vertex as i32,
                 );
 
-                last_vertex += buffers.vertices.len();
-                last_index += buffers.indices.len();
+                last_vertex += mesh.buffers.vertices.len();
+                last_index += mesh.buffers.indices.len();
             }
         }
 
         unsafe {
             gl.bind_vertex_array(None);
-            gl.use_program(None);
             gl.disable(glow::SCISSOR_TEST);
             gl.disable(glow::MULTISAMPLE);
         }
     }
 }
 
-#[repr(C)]
-#[derive(Debug, Clone, Copy)]
-struct Uniforms {
-    transform: [f32; 16],
-}
-
-unsafe impl bytemuck::Zeroable for Uniforms {}
-unsafe impl bytemuck::Pod for Uniforms {}
-
-impl Default for Uniforms {
-    fn default() -> Self {
-        Self {
-            transform: *Transformation::identity().as_ref(),
-        }
+/// A simple shader program. Uses [`triangle.vert`] for its vertex shader and only binds position
+/// attribute location.
+pub(super) fn program(
+    gl: &glow::Context,
+    shader_version: &program::Version,
+    fragment_shader: &'static str,
+) -> <glow::Context as HasContext>::Program {
+    unsafe {
+        let vertex_shader = program::Shader::vertex(
+            gl,
+            shader_version,
+            include_str!("shader/common/triangle.vert"),
+        );
+
+        let fragment_shader =
+            program::Shader::fragment(gl, shader_version, fragment_shader);
+
+        program::create(
+            gl,
+            &[vertex_shader, fragment_shader],
+            &[(0, "i_Position")],
+        )
     }
 }
 
-impl From<Transformation> for Uniforms {
-    fn from(transformation: Transformation) -> Uniforms {
-        Self {
-            transform: transformation.into(),
-        }
+pub fn set_transform(
+    gl: &glow::Context,
+    location: <glow::Context as HasContext>::UniformLocation,
+    transform: Transformation,
+) {
+    unsafe {
+        gl.uniform_matrix_4_f32_slice(
+            Some(&location),
+            false,
+            transform.as_ref(),
+        );
     }
 }
 
diff --git a/glow/src/triangle/gradient.rs b/glow/src/triangle/gradient.rs
new file mode 100644
index 00000000..5225612e
--- /dev/null
+++ b/glow/src/triangle/gradient.rs
@@ -0,0 +1,162 @@
+use crate::program::Version;
+use crate::triangle;
+use glow::{Context, HasContext, NativeProgram};
+use iced_graphics::gradient::Gradient;
+use iced_graphics::gradient::Linear;
+use iced_graphics::Transformation;
+
+#[derive(Debug)]
+pub struct Program {
+    pub program: <Context as HasContext>::Program,
+    pub uniform_data: UniformData,
+}
+
+#[derive(Debug)]
+pub struct UniformData {
+    gradient: Gradient,
+    transform: Transformation,
+    uniform_locations: UniformLocations,
+}
+
+#[derive(Debug)]
+struct UniformLocations {
+    gradient_direction_location: <Context as HasContext>::UniformLocation,
+    color_stops_size_location: <Context as HasContext>::UniformLocation,
+    //currently the maximum number of stops is 16 due to lack of SSBO in GL2.1
+    color_stops_location: <Context as HasContext>::UniformLocation,
+    transform_location: <Context as HasContext>::UniformLocation,
+}
+
+impl Program {
+    pub fn new(gl: &Context, shader_version: &Version) -> Self {
+        let program = triangle::program(
+            gl,
+            shader_version,
+            include_str!("../shader/common/gradient.frag"),
+        );
+
+        Self {
+            program,
+            uniform_data: UniformData::new(gl, program),
+        }
+    }
+
+    pub fn write_uniforms(
+        &mut self,
+        gl: &Context,
+        gradient: &Gradient,
+        transform: &Transformation,
+    ) {
+        if transform != &self.uniform_data.transform {
+            triangle::set_transform(
+                gl,
+                self.uniform_data.uniform_locations.transform_location,
+                *transform,
+            );
+        }
+
+        if &self.uniform_data.gradient != gradient {
+            match gradient {
+                Gradient::Linear(linear) => unsafe {
+                    gl.uniform_4_f32(
+                        Some(
+                            &self
+                                .uniform_data
+                                .uniform_locations
+                                .gradient_direction_location,
+                        ),
+                        linear.start.x,
+                        linear.start.y,
+                        linear.end.x,
+                        linear.end.y,
+                    );
+
+                    gl.uniform_1_u32(
+                        Some(
+                            &self
+                                .uniform_data
+                                .uniform_locations
+                                .color_stops_size_location,
+                        ),
+                        (linear.color_stops.len() * 2) as u32,
+                    );
+
+                    let mut stops = [0.0; 128];
+
+                    for (index, stop) in
+                        linear.color_stops.iter().enumerate().take(16)
+                    {
+                        let [r, g, b, a] = stop.color.into_linear();
+
+                        stops[index * 8] = r;
+                        stops[(index * 8) + 1] = g;
+                        stops[(index * 8) + 2] = b;
+                        stops[(index * 8) + 3] = a;
+                        stops[(index * 8) + 4] = stop.offset;
+                        stops[(index * 8) + 5] = 0.;
+                        stops[(index * 8) + 6] = 0.;
+                        stops[(index * 8) + 7] = 0.;
+                    }
+
+                    gl.uniform_4_f32_slice(
+                        Some(
+                            &self
+                                .uniform_data
+                                .uniform_locations
+                                .color_stops_location,
+                        ),
+                        &stops,
+                    );
+                },
+            }
+
+            self.uniform_data.gradient = gradient.clone();
+        }
+    }
+
+    pub fn use_program(
+        &mut self,
+        gl: &Context,
+        gradient: &Gradient,
+        transform: &Transformation,
+    ) {
+        unsafe { gl.use_program(Some(self.program)) }
+        self.write_uniforms(gl, gradient, transform);
+    }
+}
+
+impl UniformData {
+    fn new(gl: &Context, program: NativeProgram) -> Self {
+        let gradient_direction_location =
+            unsafe { gl.get_uniform_location(program, "gradient_direction") }
+                .expect("Gradient - Get gradient_direction.");
+
+        let color_stops_size_location =
+            unsafe { gl.get_uniform_location(program, "color_stops_size") }
+                .expect("Gradient - Get color_stops_size.");
+
+        let color_stops_location = unsafe {
+            gl.get_uniform_location(program, "color_stops")
+                .expect("Gradient - Get color_stops.")
+        };
+
+        let transform_location =
+            unsafe { gl.get_uniform_location(program, "u_Transform") }
+                .expect("Gradient - Get u_Transform.");
+
+        Self {
+            gradient: Gradient::Linear(Linear {
+                start: Default::default(),
+                end: Default::default(),
+                color_stops: vec![],
+            }),
+            transform: Transformation::identity(),
+            uniform_locations: UniformLocations {
+                gradient_direction_location,
+                color_stops_size_location,
+                color_stops_location,
+                transform_location,
+            },
+        }
+    }
+}
diff --git a/glow/src/triangle/solid.rs b/glow/src/triangle/solid.rs
new file mode 100644
index 00000000..fb3d40c3
--- /dev/null
+++ b/glow/src/triangle/solid.rs
@@ -0,0 +1,91 @@
+use crate::program::Version;
+use crate::{triangle, Color};
+use glow::{Context, HasContext, NativeProgram};
+use iced_graphics::Transformation;
+
+#[derive(Debug)]
+pub struct Program {
+    program: <Context as HasContext>::Program,
+    uniform_data: UniformData,
+}
+
+#[derive(Debug)]
+struct UniformData {
+    pub color: Color,
+    pub color_location: <Context as HasContext>::UniformLocation,
+    pub transform: Transformation,
+    pub transform_location: <Context as HasContext>::UniformLocation,
+}
+
+impl UniformData {
+    fn new(gl: &Context, program: NativeProgram) -> Self {
+        Self {
+            color: Color::TRANSPARENT,
+            color_location: unsafe {
+                gl.get_uniform_location(program, "color")
+            }
+            .expect("Solid - Get color."),
+            transform: Transformation::identity(),
+            transform_location: unsafe {
+                gl.get_uniform_location(program, "u_Transform")
+            }
+            .expect("Solid - Get u_Transform."),
+        }
+    }
+}
+
+impl Program {
+    pub fn new(gl: &Context, shader_version: &Version) -> Self {
+        let program = triangle::program(
+            gl,
+            shader_version,
+            include_str!("../shader/common/triangle.frag"),
+        );
+
+        Self {
+            program,
+            uniform_data: UniformData::new(gl, program),
+        }
+    }
+
+    pub fn write_uniforms(
+        &mut self,
+        gl: &Context,
+        color: &Color,
+        transform: &Transformation,
+    ) {
+        if transform != &self.uniform_data.transform {
+            triangle::set_transform(
+                gl,
+                self.uniform_data.transform_location,
+                *transform,
+            )
+        }
+
+        if color != &self.uniform_data.color {
+            let [r, g, b, a] = color.into_linear();
+
+            unsafe {
+                gl.uniform_4_f32(
+                    Some(&self.uniform_data.color_location),
+                    r,
+                    g,
+                    b,
+                    a,
+                );
+            }
+
+            self.uniform_data.color = *color;
+        }
+    }
+
+    pub fn use_program(
+        &mut self,
+        gl: &Context,
+        color: &Color,
+        transform: &Transformation,
+    ) {
+        unsafe { gl.use_program(Some(self.program)) }
+        self.write_uniforms(gl, color, transform)
+    }
+}
diff --git a/glow/src/window/compositor.rs b/glow/src/window/compositor.rs
index f6afaa68..20756032 100644
--- a/glow/src/window/compositor.rs
+++ b/glow/src/window/compositor.rs
@@ -26,8 +26,11 @@ impl<Theme> iced_graphics::window::GLCompositor for Compositor<Theme> {
         log::info!("{:#?}", settings);
 
         let version = gl.version();
-        log::info!("Version: {:?}", version);
-        log::info!("Embedded: {}", version.is_embedded);
+        log::info!(
+            "OpenGL version: {:?} (Embedded: {})",
+            version,
+            version.is_embedded
+        );
 
         let renderer = gl.get_parameter_string(glow::RENDERER);
         log::info!("Renderer: {}", renderer);
diff --git a/graphics/Cargo.toml b/graphics/Cargo.toml
index 18fef54f..3b0e5236 100644
--- a/graphics/Cargo.toml
+++ b/graphics/Cargo.toml
@@ -19,7 +19,7 @@ font-icons = []
 opengl = []
 
 [dependencies]
-glam = "0.10"
+glam = "0.21.3"
 raw-window-handle = "0.5"
 thiserror = "1.0"
 
diff --git a/graphics/src/gradient.rs b/graphics/src/gradient.rs
new file mode 100644
index 00000000..64f9e4b3
--- /dev/null
+++ b/graphics/src/gradient.rs
@@ -0,0 +1,112 @@
+//! For creating a Gradient.
+pub mod linear;
+
+pub use linear::Linear;
+
+use crate::{Color, Point, Size};
+
+#[derive(Debug, Clone, PartialEq)]
+/// A fill which transitions colors progressively along a direction, either linearly, radially (TBD),
+/// or conically (TBD).
+pub enum Gradient {
+    /// A linear gradient interpolates colors along a direction from its [`start`] to its [`end`]
+    /// point.
+    Linear(Linear),
+}
+
+impl Gradient {
+    /// Creates a new linear [`linear::Builder`].
+    pub fn linear(position: impl Into<Position>) -> linear::Builder {
+        linear::Builder::new(position.into())
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+/// A point along the gradient vector where the specified [`color`] is unmixed.
+pub struct ColorStop {
+    /// Offset along the gradient vector.
+    pub offset: f32,
+    /// The color of the gradient at the specified [`offset`].
+    pub color: Color,
+}
+
+#[derive(Debug)]
+/// The position of the gradient within its bounds.
+pub enum Position {
+    /// The gradient will be positioned with respect to two points.
+    Absolute {
+        /// The starting point of the gradient.
+        start: Point,
+        /// The ending point of the gradient.
+        end: Point,
+    },
+    /// The gradient will be positioned relative to the provided bounds.
+    Relative {
+        /// The top left position of the bounds.
+        top_left: Point,
+        /// The width & height of the bounds.
+        size: Size,
+        /// The start [Location] of the gradient.
+        start: Location,
+        /// The end [Location] of the gradient.
+        end: Location,
+    },
+}
+
+impl From<(Point, Point)> for Position {
+    fn from((start, end): (Point, Point)) -> Self {
+        Self::Absolute { start, end }
+    }
+}
+
+#[derive(Debug)]
+/// The location of a relatively-positioned gradient.
+pub enum Location {
+    /// Top left.
+    TopLeft,
+    /// Top.
+    Top,
+    /// Top right.
+    TopRight,
+    /// Right.
+    Right,
+    /// Bottom right.
+    BottomRight,
+    /// Bottom.
+    Bottom,
+    /// Bottom left.
+    BottomLeft,
+    /// Left.
+    Left,
+}
+
+impl Location {
+    fn to_absolute(&self, top_left: Point, size: Size) -> Point {
+        match self {
+            Location::TopLeft => top_left,
+            Location::Top => {
+                Point::new(top_left.x + size.width / 2.0, top_left.y)
+            }
+            Location::TopRight => {
+                Point::new(top_left.x + size.width, top_left.y)
+            }
+            Location::Right => Point::new(
+                top_left.x + size.width,
+                top_left.y + size.height / 2.0,
+            ),
+            Location::BottomRight => {
+                Point::new(top_left.x + size.width, top_left.y + size.height)
+            }
+            Location::Bottom => Point::new(
+                top_left.x + size.width / 2.0,
+                top_left.y + size.height,
+            ),
+            Location::BottomLeft => {
+                Point::new(top_left.x, top_left.y + size.height)
+            }
+            Location::Left => {
+                Point::new(top_left.x, top_left.y + size.height / 2.0)
+            }
+        }
+    }
+}
diff --git a/graphics/src/gradient/linear.rs b/graphics/src/gradient/linear.rs
new file mode 100644
index 00000000..9928c1eb
--- /dev/null
+++ b/graphics/src/gradient/linear.rs
@@ -0,0 +1,109 @@
+//! Linear gradient builder & definition.
+use crate::gradient::{ColorStop, Gradient, Position};
+use crate::{Color, Point};
+
+/// A linear gradient that can be used in the style of [`super::Fill`] or [`super::Stroke`].
+#[derive(Debug, Clone, PartialEq)]
+pub struct Linear {
+    /// The point where the linear gradient begins.
+    pub start: Point,
+    /// The point where the linear gradient ends.
+    pub end: Point,
+    /// [`ColorStop`]s along the linear gradient path.
+    pub color_stops: Vec<ColorStop>,
+}
+
+/// A [`Linear`] builder.
+#[derive(Debug)]
+pub struct Builder {
+    start: Point,
+    end: Point,
+    stops: Vec<ColorStop>,
+    error: Option<BuilderError>,
+}
+
+impl Builder {
+    /// Creates a new [`Builder`].
+    pub fn new(position: Position) -> Self {
+        let (start, end) = match position {
+            Position::Absolute { start, end } => (start, end),
+            Position::Relative {
+                top_left,
+                size,
+                start,
+                end,
+            } => (
+                start.to_absolute(top_left, size),
+                end.to_absolute(top_left, size),
+            ),
+        };
+
+        Self {
+            start,
+            end,
+            stops: vec![],
+            error: None,
+        }
+    }
+
+    /// Adds a new stop, defined by an offset and a color, to the gradient.
+    ///
+    /// `offset` must be between `0.0` and `1.0` or the gradient cannot be built.
+    ///
+    /// Note: when using the [`glow`] backend, any color stop added after the 16th
+    /// will not be displayed.
+    ///
+    /// On the [`wgpu`] backend this limitation does not exist (technical limit is 524,288 stops).
+    ///
+    /// [`glow`]: https://docs.rs/iced_glow
+    /// [`wgpu`]: https://docs.rs/iced_wgpu
+    pub fn add_stop(mut self, offset: f32, color: Color) -> Self {
+        if offset.is_finite() && (0.0..=1.0).contains(&offset) {
+            match self.stops.binary_search_by(|stop| {
+                stop.offset.partial_cmp(&offset).unwrap()
+            }) {
+                Ok(_) => {
+                    self.error = Some(BuilderError::DuplicateOffset(offset))
+                }
+                Err(index) => {
+                    self.stops.insert(index, ColorStop { offset, color });
+                }
+            }
+        } else {
+            self.error = Some(BuilderError::InvalidOffset(offset))
+        };
+
+        self
+    }
+
+    /// Builds the linear [`Gradient`] of this [`Builder`].
+    ///
+    /// Returns `BuilderError` if gradient in invalid.
+    pub fn build(self) -> Result<Gradient, BuilderError> {
+        if self.stops.is_empty() {
+            Err(BuilderError::MissingColorStop)
+        } else if let Some(error) = self.error {
+            Err(error)
+        } else {
+            Ok(Gradient::Linear(Linear {
+                start: self.start,
+                end: self.end,
+                color_stops: self.stops,
+            }))
+        }
+    }
+}
+
+/// An error that happened when building a [`Linear`] gradient.
+#[derive(Debug, thiserror::Error)]
+pub enum BuilderError {
+    #[error("Gradients must contain at least one color stop.")]
+    /// Gradients must contain at least one color stop.
+    MissingColorStop,
+    #[error("Offset {0} must be a unique, finite number.")]
+    /// Offsets in a gradient must all be unique & finite.
+    DuplicateOffset(f32),
+    #[error("Offset {0} must be between 0.0..=1.0.")]
+    /// Offsets in a gradient must be between 0.0..=1.0.
+    InvalidOffset(f32),
+}
diff --git a/graphics/src/layer.rs b/graphics/src/layer.rs
index af545713..e95934b0 100644
--- a/graphics/src/layer.rs
+++ b/graphics/src/layer.rs
@@ -1,15 +1,22 @@
 //! Organize rendering primitives into a flattened list of layers.
+mod image;
+mod quad;
+mod text;
+
+pub mod mesh;
+
+pub use image::Image;
+pub use mesh::Mesh;
+pub use quad::Quad;
+pub use text::Text;
+
 use crate::alignment;
-use crate::triangle;
 use crate::{
     Background, Font, Point, Primitive, Rectangle, Size, Vector, Viewport,
 };
 
-use iced_native::image;
-use iced_native::svg;
-
 /// A group of primitives that should be clipped together.
-#[derive(Debug, Clone)]
+#[derive(Debug)]
 pub struct Layer<'a> {
     /// The clipping bounds of the [`Layer`].
     pub bounds: Rectangle,
@@ -159,7 +166,11 @@ impl<'a> Layer<'a> {
                     border_color: border_color.into_linear(),
                 });
             }
-            Primitive::Mesh2D { buffers, size } => {
+            Primitive::Mesh2D {
+                buffers,
+                size,
+                style,
+            } => {
                 let layer = &mut layers[current_layer];
 
                 let bounds = Rectangle::new(
@@ -173,6 +184,7 @@ impl<'a> Layer<'a> {
                         origin: Point::new(translation.x, translation.y),
                         buffers,
                         clip_bounds,
+                        style,
                     });
                 }
             }
@@ -233,93 +245,3 @@ impl<'a> Layer<'a> {
         }
     }
 }
-
-/// A colored rectangle with a border.
-///
-/// This type can be directly uploaded to GPU memory.
-#[derive(Debug, Clone, Copy)]
-#[repr(C)]
-pub struct Quad {
-    /// The position of the [`Quad`].
-    pub position: [f32; 2],
-
-    /// The size of the [`Quad`].
-    pub size: [f32; 2],
-
-    /// The color of the [`Quad`], in __linear RGB__.
-    pub color: [f32; 4],
-
-    /// The border color of the [`Quad`], in __linear RGB__.
-    pub border_color: [f32; 4],
-
-    /// The border radius of the [`Quad`].
-    pub border_radius: f32,
-
-    /// The border width of the [`Quad`].
-    pub border_width: f32,
-}
-
-/// A mesh of triangles.
-#[derive(Debug, Clone, Copy)]
-pub struct Mesh<'a> {
-    /// The origin of the vertices of the [`Mesh`].
-    pub origin: Point,
-
-    /// The vertex and index buffers of the [`Mesh`].
-    pub buffers: &'a triangle::Mesh2D,
-
-    /// The clipping bounds of the [`Mesh`].
-    pub clip_bounds: Rectangle<f32>,
-}
-
-/// A paragraph of text.
-#[derive(Debug, Clone, Copy)]
-pub struct Text<'a> {
-    /// The content of the [`Text`].
-    pub content: &'a str,
-
-    /// The layout bounds of the [`Text`].
-    pub bounds: Rectangle,
-
-    /// The color of the [`Text`], in __linear RGB_.
-    pub color: [f32; 4],
-
-    /// The size of the [`Text`].
-    pub size: f32,
-
-    /// The font of the [`Text`].
-    pub font: Font,
-
-    /// The horizontal alignment of the [`Text`].
-    pub horizontal_alignment: alignment::Horizontal,
-
-    /// The vertical alignment of the [`Text`].
-    pub vertical_alignment: alignment::Vertical,
-}
-
-/// A raster or vector image.
-#[derive(Debug, Clone)]
-pub enum Image {
-    /// A raster image.
-    Raster {
-        /// The handle of a raster image.
-        handle: image::Handle,
-
-        /// The bounds of the image.
-        bounds: Rectangle,
-    },
-    /// A vector image.
-    Vector {
-        /// The handle of a vector image.
-        handle: svg::Handle,
-
-        /// The bounds of the image.
-        bounds: Rectangle,
-    },
-}
-
-#[allow(unsafe_code)]
-unsafe impl bytemuck::Zeroable for Quad {}
-
-#[allow(unsafe_code)]
-unsafe impl bytemuck::Pod for Quad {}
diff --git a/graphics/src/layer/image.rs b/graphics/src/layer/image.rs
new file mode 100644
index 00000000..045ec665
--- /dev/null
+++ b/graphics/src/layer/image.rs
@@ -0,0 +1,23 @@
+use crate::Rectangle;
+use iced_native::{image, svg};
+
+/// A raster or vector image.
+#[derive(Debug, Clone)]
+pub enum Image {
+    /// A raster image.
+    Raster {
+        /// The handle of a raster image.
+        handle: image::Handle,
+
+        /// The bounds of the image.
+        bounds: Rectangle,
+    },
+    /// A vector image.
+    Vector {
+        /// The handle of a vector image.
+        handle: svg::Handle,
+
+        /// The bounds of the image.
+        bounds: Rectangle,
+    },
+}
diff --git a/graphics/src/layer/mesh.rs b/graphics/src/layer/mesh.rs
new file mode 100644
index 00000000..979081f1
--- /dev/null
+++ b/graphics/src/layer/mesh.rs
@@ -0,0 +1,31 @@
+//! A collection of triangle primitives.
+use crate::triangle;
+use crate::{Point, Rectangle};
+
+/// A mesh of triangles.
+#[derive(Debug, Clone, Copy)]
+pub struct Mesh<'a> {
+    /// The origin of the vertices of the [`Mesh`].
+    pub origin: Point,
+
+    /// The vertex and index buffers of the [`Mesh`].
+    pub buffers: &'a triangle::Mesh2D,
+
+    /// The clipping bounds of the [`Mesh`].
+    pub clip_bounds: Rectangle<f32>,
+
+    /// The shader of the [`Mesh`].
+    pub style: &'a triangle::Style,
+}
+
+/// Returns the number of total vertices & total indices of all [`Mesh`]es.
+pub fn attribute_count_of<'a>(meshes: &'a [Mesh<'a>]) -> (usize, usize) {
+    meshes
+        .iter()
+        .map(|Mesh { buffers, .. }| {
+            (buffers.vertices.len(), buffers.indices.len())
+        })
+        .fold((0, 0), |(total_v, total_i), (v, i)| {
+            (total_v + v, total_i + i)
+        })
+}
diff --git a/graphics/src/layer/quad.rs b/graphics/src/layer/quad.rs
new file mode 100644
index 00000000..4def8427
--- /dev/null
+++ b/graphics/src/layer/quad.rs
@@ -0,0 +1,30 @@
+/// A colored rectangle with a border.
+///
+/// This type can be directly uploaded to GPU memory.
+#[derive(Debug, Clone, Copy)]
+#[repr(C)]
+pub struct Quad {
+    /// The position of the [`Quad`].
+    pub position: [f32; 2],
+
+    /// The size of the [`Quad`].
+    pub size: [f32; 2],
+
+    /// The color of the [`Quad`], in __linear RGB__.
+    pub color: [f32; 4],
+
+    /// The border color of the [`Quad`], in __linear RGB__.
+    pub border_color: [f32; 4],
+
+    /// The border radius of the [`Quad`].
+    pub border_radius: f32,
+
+    /// The border width of the [`Quad`].
+    pub border_width: f32,
+}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Zeroable for Quad {}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Pod for Quad {}
diff --git a/graphics/src/layer/text.rs b/graphics/src/layer/text.rs
new file mode 100644
index 00000000..74f7a676
--- /dev/null
+++ b/graphics/src/layer/text.rs
@@ -0,0 +1,26 @@
+use crate::{alignment, Font, Rectangle};
+
+/// A paragraph of text.
+#[derive(Debug, Clone, Copy)]
+pub struct Text<'a> {
+    /// The content of the [`Text`].
+    pub content: &'a str,
+
+    /// The layout bounds of the [`Text`].
+    pub bounds: Rectangle,
+
+    /// The color of the [`Text`], in __linear RGB_.
+    pub color: [f32; 4],
+
+    /// The size of the [`Text`].
+    pub size: f32,
+
+    /// The font of the [`Text`].
+    pub font: Font,
+
+    /// The horizontal alignment of the [`Text`].
+    pub horizontal_alignment: alignment::Horizontal,
+
+    /// The vertical alignment of the [`Text`].
+    pub vertical_alignment: alignment::Vertical,
+}
diff --git a/graphics/src/lib.rs b/graphics/src/lib.rs
index 11082472..ec28ee58 100644
--- a/graphics/src/lib.rs
+++ b/graphics/src/lib.rs
@@ -29,6 +29,7 @@ mod viewport;
 
 pub mod backend;
 pub mod font;
+pub mod gradient;
 pub mod layer;
 pub mod overlay;
 pub mod renderer;
@@ -39,6 +40,7 @@ pub mod window;
 pub use antialiasing::Antialiasing;
 pub use backend::Backend;
 pub use error::Error;
+pub use gradient::Gradient;
 pub use layer::Layer;
 pub use primitive::Primitive;
 pub use renderer::Renderer;
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
index 5f7a344d..b481ac0b 100644
--- a/graphics/src/primitive.rs
+++ b/graphics/src/primitive.rs
@@ -88,6 +88,9 @@ pub enum Primitive {
         ///
         /// Any geometry that falls out of this region will be clipped.
         size: Size,
+
+        /// The shader of the mesh
+        style: triangle::Style,
     },
     /// A cached primitive.
     ///
diff --git a/graphics/src/transformation.rs b/graphics/src/transformation.rs
index 2a19caed..cf0457a4 100644
--- a/graphics/src/transformation.rs
+++ b/graphics/src/transformation.rs
@@ -8,7 +8,7 @@ pub struct Transformation(Mat4);
 impl Transformation {
     /// Get the identity transformation.
     pub fn identity() -> Transformation {
-        Transformation(Mat4::identity())
+        Transformation(Mat4::IDENTITY)
     }
 
     /// Creates an orthographic projection.
@@ -51,3 +51,9 @@ impl From<Transformation> for [f32; 16] {
         *t.as_ref()
     }
 }
+
+impl From<Transformation> for Mat4 {
+    fn from(transformation: Transformation) -> Self {
+        transformation.0
+    }
+}
diff --git a/graphics/src/triangle.rs b/graphics/src/triangle.rs
index 05028f51..04ff6d21 100644
--- a/graphics/src/triangle.rs
+++ b/graphics/src/triangle.rs
@@ -1,4 +1,6 @@
 //! Draw geometry using meshes of triangles.
+use crate::{Color, Gradient};
+
 use bytemuck::{Pod, Zeroable};
 
 /// A set of [`Vertex2D`] and indices representing a list of triangles.
@@ -6,20 +8,37 @@ use bytemuck::{Pod, Zeroable};
 pub struct Mesh2D {
     /// The vertices of the mesh
     pub vertices: Vec<Vertex2D>,
-
     /// The list of vertex indices that defines the triangles of the mesh.
     ///
-    /// Therefore, this list should always have a length that is a multiple of
-    /// 3.
+    /// Therefore, this list should always have a length that is a multiple of 3.
     pub indices: Vec<u32>,
 }
 
-/// A two-dimensional vertex with some color in __linear__ RGBA.
+/// A two-dimensional vertex.
 #[derive(Copy, Clone, Debug, Zeroable, Pod)]
 #[repr(C)]
 pub struct Vertex2D {
-    /// The vertex position
+    /// The vertex position in 2D space.
     pub position: [f32; 2],
-    /// The vertex color in __linear__ RGBA.
-    pub color: [f32; 4],
+}
+
+#[derive(Debug, Clone, PartialEq)]
+/// Supported shaders for triangle primitives.
+pub enum Style {
+    /// Fill a primitive with a solid color.
+    Solid(Color),
+    /// Fill a primitive with an interpolated color.
+    Gradient(Gradient),
+}
+
+impl From<Color> for Style {
+    fn from(color: Color) -> Self {
+        Self::Solid(color)
+    }
+}
+
+impl From<Gradient> for Style {
+    fn from(gradient: Gradient) -> Self {
+        Self::Gradient(gradient)
+    }
 }
diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs
index b4afd998..a14940d9 100644
--- a/graphics/src/widget/canvas.rs
+++ b/graphics/src/widget/canvas.rs
@@ -3,19 +3,19 @@
 //! A [`Canvas`] widget can be used to draw different kinds of 2D shapes in a
 //! [`Frame`]. It can be used for animation, data visualization, game graphics,
 //! and more!
-
 pub mod event;
+pub mod fill;
 pub mod path;
+pub mod stroke;
 
 mod cache;
 mod cursor;
-mod fill;
 mod frame;
 mod geometry;
 mod program;
-mod stroke;
 mod text;
 
+pub use crate::gradient::{self, Gradient};
 pub use cache::Cache;
 pub use cursor::Cursor;
 pub use event::Event;
diff --git a/graphics/src/widget/canvas/fill.rs b/graphics/src/widget/canvas/fill.rs
index 56495435..c69fc0d7 100644
--- a/graphics/src/widget/canvas/fill.rs
+++ b/graphics/src/widget/canvas/fill.rs
@@ -1,12 +1,15 @@
-use iced_native::Color;
+//! Fill [crate::widget::canvas::Geometry] with a certain style.
+use crate::{Color, Gradient};
+
+pub use crate::triangle::Style;
 
 /// The style used to fill geometry.
-#[derive(Debug, Clone, Copy)]
+#[derive(Debug, Clone)]
 pub struct Fill {
-    /// The color used to fill geometry.
+    /// The color or gradient of the fill.
     ///
-    /// By default, it is set to `BLACK`.
-    pub color: Color,
+    /// By default, it is set to [`FillStyle::Solid`] `BLACK`.
+    pub style: Style,
 
     /// The fill rule defines how to determine what is inside and what is
     /// outside of a shape.
@@ -20,9 +23,9 @@ pub struct Fill {
 }
 
 impl Default for Fill {
-    fn default() -> Fill {
-        Fill {
-            color: Color::BLACK,
+    fn default() -> Self {
+        Self {
+            style: Style::Solid(Color::BLACK),
             rule: FillRule::NonZero,
         }
     }
@@ -31,12 +34,21 @@ impl Default for Fill {
 impl From<Color> for Fill {
     fn from(color: Color) -> Fill {
         Fill {
-            color,
+            style: Style::Solid(color),
             ..Fill::default()
         }
     }
 }
 
+impl From<Gradient> for Fill {
+    fn from(gradient: Gradient) -> Self {
+        Fill {
+            style: Style::Gradient(gradient),
+            ..Default::default()
+        }
+    }
+}
+
 /// The fill rule defines how to determine what is inside and what is outside of
 /// a shape.
 ///
diff --git a/graphics/src/widget/canvas/frame.rs b/graphics/src/widget/canvas/frame.rs
index 516539ca..cf6c6928 100644
--- a/graphics/src/widget/canvas/frame.rs
+++ b/graphics/src/widget/canvas/frame.rs
@@ -1,13 +1,14 @@
-use std::borrow::Cow;
-
-use iced_native::{Point, Rectangle, Size, Vector};
-
+use crate::gradient::Gradient;
 use crate::triangle;
-use crate::widget::canvas::path;
-use crate::widget::canvas::{Fill, Geometry, Path, Stroke, Text};
+use crate::triangle::Vertex2D;
+use crate::widget::canvas::{path, Fill, Geometry, Path, Stroke, Text};
 use crate::Primitive;
 
+use iced_native::{Point, Rectangle, Size, Vector};
+
+use lyon::geom::euclid;
 use lyon::tessellation;
+use std::borrow::Cow;
 
 /// The frame of a [`Canvas`].
 ///
@@ -15,13 +16,41 @@ use lyon::tessellation;
 #[allow(missing_debug_implementations)]
 pub struct Frame {
     size: Size,
-    buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+    buffers: BufferStack,
     primitives: Vec<Primitive>,
     transforms: Transforms,
     fill_tessellator: tessellation::FillTessellator,
     stroke_tessellator: tessellation::StrokeTessellator,
 }
 
+struct BufferStack {
+    stack: Vec<(tessellation::VertexBuffers<Vertex2D, u32>, triangle::Style)>,
+}
+
+impl BufferStack {
+    fn new() -> Self {
+        Self { stack: Vec::new() }
+    }
+
+    fn get(
+        &mut self,
+        mesh_style: triangle::Style,
+    ) -> tessellation::BuffersBuilder<'_, Vertex2D, u32, Vertex2DBuilder> {
+        match self.stack.last_mut() {
+            Some((_, current_style)) if current_style == &mesh_style => {}
+            _ => {
+                self.stack
+                    .push((tessellation::VertexBuffers::new(), mesh_style));
+            }
+        };
+
+        tessellation::BuffersBuilder::new(
+            &mut self.stack.last_mut().unwrap().0,
+            Vertex2DBuilder,
+        )
+    }
+}
+
 #[derive(Debug)]
 struct Transforms {
     previous: Vec<Transform>,
@@ -34,6 +63,35 @@ struct Transform {
     is_identity: bool,
 }
 
+impl Transform {
+    /// Transforms the given [Point] by the transformation matrix.
+    fn transform_point(&self, point: &mut Point) {
+        let transformed = self
+            .raw
+            .transform_point(euclid::Point2D::new(point.x, point.y));
+        point.x = transformed.x;
+        point.y = transformed.y;
+    }
+
+    fn transform_style(&self, style: triangle::Style) -> triangle::Style {
+        match style {
+            triangle::Style::Solid(color) => triangle::Style::Solid(color),
+            triangle::Style::Gradient(gradient) => {
+                triangle::Style::Gradient(self.transform_gradient(gradient))
+            }
+        }
+    }
+
+    fn transform_gradient(&self, mut gradient: Gradient) -> Gradient {
+        let (start, end) = match &mut gradient {
+            Gradient::Linear(linear) => (&mut linear.start, &mut linear.end),
+        };
+        self.transform_point(start);
+        self.transform_point(end);
+        gradient
+    }
+}
+
 impl Frame {
     /// Creates a new empty [`Frame`] with the given dimensions.
     ///
@@ -42,7 +100,7 @@ impl Frame {
     pub fn new(size: Size) -> Frame {
         Frame {
             size,
-            buffers: lyon::tessellation::VertexBuffers::new(),
+            buffers: BufferStack::new(),
             primitives: Vec::new(),
             transforms: Transforms {
                 previous: Vec::new(),
@@ -83,21 +141,20 @@ impl Frame {
     /// Draws the given [`Path`] on the [`Frame`] by filling it with the
     /// provided style.
     pub fn fill(&mut self, path: &Path, fill: impl Into<Fill>) {
-        let Fill { color, rule } = fill.into();
+        let Fill { style, rule } = fill.into();
 
-        let mut buffers = tessellation::BuffersBuilder::new(
-            &mut self.buffers,
-            FillVertex(color.into_linear()),
-        );
+        let mut buffer = self
+            .buffers
+            .get(self.transforms.current.transform_style(style));
 
         let options =
             tessellation::FillOptions::default().with_fill_rule(rule.into());
 
-        let result = if self.transforms.current.is_identity {
+        if self.transforms.current.is_identity {
             self.fill_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffers,
+                &mut buffer,
             )
         } else {
             let path = path.transformed(&self.transforms.current.raw);
@@ -105,11 +162,10 @@ impl Frame {
             self.fill_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffers,
+                &mut buffer,
             )
-        };
-
-        result.expect("Tessellate path");
+        }
+        .expect("Tessellate path.");
     }
 
     /// Draws an axis-aligned rectangle given its top-left corner coordinate and
@@ -120,12 +176,11 @@ impl Frame {
         size: Size,
         fill: impl Into<Fill>,
     ) {
-        let Fill { color, rule } = fill.into();
+        let Fill { style, rule } = fill.into();
 
-        let mut buffers = tessellation::BuffersBuilder::new(
-            &mut self.buffers,
-            FillVertex(color.into_linear()),
-        );
+        let mut buffer = self
+            .buffers
+            .get(self.transforms.current.transform_style(style));
 
         let top_left =
             self.transforms.current.raw.transform_point(
@@ -144,7 +199,7 @@ impl Frame {
             .tessellate_rectangle(
                 &lyon::math::Box2D::new(top_left, top_left + size),
                 &options,
-                &mut buffers,
+                &mut buffer,
             )
             .expect("Fill rectangle");
     }
@@ -154,10 +209,9 @@ impl Frame {
     pub fn stroke<'a>(&mut self, path: &Path, stroke: impl Into<Stroke<'a>>) {
         let stroke = stroke.into();
 
-        let mut buffers = tessellation::BuffersBuilder::new(
-            &mut self.buffers,
-            StrokeVertex(stroke.color.into_linear()),
-        );
+        let mut buffer = self
+            .buffers
+            .get(self.transforms.current.transform_style(stroke.style));
 
         let mut options = tessellation::StrokeOptions::default();
         options.line_width = stroke.width;
@@ -171,11 +225,11 @@ impl Frame {
             Cow::Owned(path::dashed(path, stroke.line_dash))
         };
 
-        let result = if self.transforms.current.is_identity {
+        if self.transforms.current.is_identity {
             self.stroke_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffers,
+                &mut buffer,
             )
         } else {
             let path = path.transformed(&self.transforms.current.raw);
@@ -183,11 +237,10 @@ impl Frame {
             self.stroke_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffers,
+                &mut buffer,
             )
-        };
-
-        result.expect("Stroke path");
+        }
+        .expect("Stroke path");
     }
 
     /// Draws the characters of the given [`Text`] on the [`Frame`], filling
@@ -206,8 +259,6 @@ impl Frame {
     ///
     /// [`Canvas`]: crate::widget::Canvas
     pub fn fill_text(&mut self, text: impl Into<Text>) {
-        use std::f32;
-
         let text = text.into();
 
         let position = if self.transforms.current.is_identity {
@@ -304,7 +355,7 @@ impl Frame {
         self.transforms.current.is_identity = false;
     }
 
-    /// Applies a rotation to the current transform of the [`Frame`].
+    /// Applies a rotation in radians to the current transform of the [`Frame`].
     #[inline]
     pub fn rotate(&mut self, angle: f32) {
         self.transforms.current.raw = self
@@ -331,52 +382,44 @@ impl Frame {
     }
 
     fn into_primitives(mut self) -> Vec<Primitive> {
-        if !self.buffers.indices.is_empty() {
-            self.primitives.push(Primitive::Mesh2D {
-                buffers: triangle::Mesh2D {
-                    vertices: self.buffers.vertices,
-                    indices: self.buffers.indices,
-                },
-                size: self.size,
-            });
+        for (buffer, style) in self.buffers.stack {
+            if !buffer.indices.is_empty() {
+                self.primitives.push(Primitive::Mesh2D {
+                    buffers: triangle::Mesh2D {
+                        vertices: buffer.vertices,
+                        indices: buffer.indices,
+                    },
+                    size: self.size,
+                    style,
+                })
+            }
         }
 
         self.primitives
     }
 }
 
-struct FillVertex([f32; 4]);
+struct Vertex2DBuilder;
 
-impl lyon::tessellation::FillVertexConstructor<triangle::Vertex2D>
-    for FillVertex
-{
-    fn new_vertex(
-        &mut self,
-        vertex: lyon::tessellation::FillVertex<'_>,
-    ) -> triangle::Vertex2D {
+impl tessellation::FillVertexConstructor<Vertex2D> for Vertex2DBuilder {
+    fn new_vertex(&mut self, vertex: tessellation::FillVertex<'_>) -> Vertex2D {
         let position = vertex.position();
 
-        triangle::Vertex2D {
+        Vertex2D {
             position: [position.x, position.y],
-            color: self.0,
         }
     }
 }
 
-struct StrokeVertex([f32; 4]);
-
-impl lyon::tessellation::StrokeVertexConstructor<triangle::Vertex2D>
-    for StrokeVertex
-{
+impl tessellation::StrokeVertexConstructor<Vertex2D> for Vertex2DBuilder {
     fn new_vertex(
         &mut self,
-        vertex: lyon::tessellation::StrokeVertex<'_, '_>,
-    ) -> triangle::Vertex2D {
+        vertex: tessellation::StrokeVertex<'_, '_>,
+    ) -> Vertex2D {
         let position = vertex.position();
 
-        triangle::Vertex2D {
+        Vertex2D {
             position: [position.x, position.y],
-            color: self.0,
         }
     }
 }
diff --git a/graphics/src/widget/canvas/stroke.rs b/graphics/src/widget/canvas/stroke.rs
index 6accc2fb..f9b8e447 100644
--- a/graphics/src/widget/canvas/stroke.rs
+++ b/graphics/src/widget/canvas/stroke.rs
@@ -1,10 +1,15 @@
+//! Create lines from a [crate::widget::canvas::Path] and assigns them various attributes/styles.
+pub use crate::triangle::Style;
+
 use iced_native::Color;
 
 /// The style of a stroke.
-#[derive(Debug, Clone, Copy)]
+#[derive(Debug, Clone)]
 pub struct Stroke<'a> {
-    /// The color of the stroke.
-    pub color: Color,
+    /// The color or gradient of the stroke.
+    ///
+    /// By default, it is set to [`StrokeStyle::Solid`] `BLACK`.
+    pub style: Style,
     /// The distance between the two edges of the stroke.
     pub width: f32,
     /// The shape to be used at the end of open subpaths when they are stroked.
@@ -19,7 +24,10 @@ pub struct Stroke<'a> {
 impl<'a> Stroke<'a> {
     /// Sets the color of the [`Stroke`].
     pub fn with_color(self, color: Color) -> Self {
-        Stroke { color, ..self }
+        Stroke {
+            style: Style::Solid(color),
+            ..self
+        }
     }
 
     /// Sets the width of the [`Stroke`].
@@ -41,7 +49,7 @@ impl<'a> Stroke<'a> {
 impl<'a> Default for Stroke<'a> {
     fn default() -> Self {
         Stroke {
-            color: Color::BLACK,
+            style: Style::Solid(Color::BLACK),
             width: 1.0,
             line_cap: LineCap::default(),
             line_join: LineJoin::default(),
diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index 55eec73f..9a57e58b 100644
--- a/wgpu/Cargo.toml
+++ b/wgpu/Cargo.toml
@@ -69,6 +69,13 @@ optional = true
 version = "0.6"
 optional = true
 
+[dependencies.encase]
+version = "0.3.0"
+features = ["glam"]
+
+[dependencies.glam]
+version = "0.21.3"
+
 [package.metadata.docs.rs]
 rustdoc-args = ["--cfg", "docsrs"]
 all-features = true
diff --git a/wgpu/src/backend.rs b/wgpu/src/backend.rs
index 8c875254..80026673 100644
--- a/wgpu/src/backend.rs
+++ b/wgpu/src/backend.rs
@@ -94,8 +94,7 @@ impl Backend {
                 staging_belt,
                 encoder,
                 frame,
-                target_size.width,
-                target_size.height,
+                target_size,
             );
         }
 
@@ -112,8 +111,7 @@ impl Backend {
         staging_belt: &mut wgpu::util::StagingBelt,
         encoder: &mut wgpu::CommandEncoder,
         target: &wgpu::TextureView,
-        target_width: u32,
-        target_height: u32,
+        target_size: Size<u32>,
     ) {
         let bounds = (layer.bounds * scale_factor).snap();
 
@@ -143,8 +141,7 @@ impl Backend {
                 staging_belt,
                 encoder,
                 target,
-                target_width,
-                target_height,
+                target_size,
                 scaled,
                 scale_factor,
                 &layer.meshes,
diff --git a/wgpu/src/buffer.rs b/wgpu/src/buffer.rs
new file mode 100644
index 00000000..7c092d0b
--- /dev/null
+++ b/wgpu/src/buffer.rs
@@ -0,0 +1,3 @@
+//! Utilities for buffer operations.
+pub mod dynamic;
+pub mod r#static;
diff --git a/wgpu/src/buffer/dynamic.rs b/wgpu/src/buffer/dynamic.rs
new file mode 100644
index 00000000..c0c48c74
--- /dev/null
+++ b/wgpu/src/buffer/dynamic.rs
@@ -0,0 +1,199 @@
+//! Utilities for uniform buffer operations.
+use encase::private::WriteInto;
+use encase::ShaderType;
+use std::marker::PhantomData;
+
+/// A dynamic buffer is any type of buffer which does not have a static offset.
+pub(crate) struct Buffer<T: ShaderType> {
+    offsets: Vec<wgpu::DynamicOffset>,
+    cpu: Internal,
+    gpu: wgpu::Buffer,
+    label: &'static str,
+    size: u64,
+    _data: PhantomData<T>,
+}
+
+impl<T: ShaderType + WriteInto> Buffer<T> {
+    /// Creates a new dynamic uniform buffer.
+    pub fn uniform(device: &wgpu::Device, label: &'static str) -> Self {
+        Buffer::new(
+            device,
+            Internal::Uniform(encase::DynamicUniformBuffer::new(Vec::new())),
+            label,
+            wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+        )
+    }
+
+    /// Creates a new dynamic storage buffer.
+    pub fn storage(device: &wgpu::Device, label: &'static str) -> Self {
+        Buffer::new(
+            device,
+            Internal::Storage(encase::DynamicStorageBuffer::new(Vec::new())),
+            label,
+            wgpu::BufferUsages::STORAGE | wgpu::BufferUsages::COPY_DST,
+        )
+    }
+
+    fn new(
+        device: &wgpu::Device,
+        dynamic_buffer_type: Internal,
+        label: &'static str,
+        usage: wgpu::BufferUsages,
+    ) -> Self {
+        let initial_size = u64::from(T::min_size());
+
+        Self {
+            offsets: Vec::new(),
+            cpu: dynamic_buffer_type,
+            gpu: Buffer::<T>::create_gpu_buffer(
+                device,
+                label,
+                usage,
+                initial_size,
+            ),
+            label,
+            size: initial_size,
+            _data: Default::default(),
+        }
+    }
+
+    fn create_gpu_buffer(
+        device: &wgpu::Device,
+        label: &'static str,
+        usage: wgpu::BufferUsages,
+        size: u64,
+    ) -> wgpu::Buffer {
+        device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some(label),
+            size,
+            usage,
+            mapped_at_creation: false,
+        })
+    }
+
+    /// Write a new value to the CPU buffer with proper alignment. Stores the returned offset value
+    /// in the buffer for future use.
+    pub fn push(&mut self, value: &T) {
+        //this write operation on the cpu buffer will adjust for uniform alignment requirements
+        let offset = self.cpu.write(value);
+        self.offsets.push(offset as u32);
+    }
+
+    /// Resize buffer contents if necessary. This will re-create the GPU buffer if current size is
+    /// less than the newly computed size from the CPU buffer.
+    ///
+    /// If the gpu buffer is resized, its bind group will need to be recreated!
+    pub fn resize(&mut self, device: &wgpu::Device) -> bool {
+        let new_size = self.cpu.get_ref().len() as u64;
+
+        if self.size < new_size {
+            let usages = match self.cpu {
+                Internal::Uniform(_) => {
+                    wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST
+                }
+                Internal::Storage(_) => {
+                    wgpu::BufferUsages::STORAGE | wgpu::BufferUsages::COPY_DST
+                }
+            };
+
+            self.gpu = Buffer::<T>::create_gpu_buffer(
+                device, self.label, usages, new_size,
+            );
+            self.size = new_size;
+            true
+        } else {
+            false
+        }
+    }
+
+    /// Write the contents of this dynamic buffer to the GPU via staging belt command.
+    pub fn write(
+        &mut self,
+        device: &wgpu::Device,
+        staging_belt: &mut wgpu::util::StagingBelt,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        let size = self.cpu.get_ref().len();
+
+        if let Some(buffer_size) = wgpu::BufferSize::new(size as u64) {
+            let mut buffer = staging_belt.write_buffer(
+                encoder,
+                &self.gpu,
+                0,
+                buffer_size,
+                device,
+            );
+
+            buffer.copy_from_slice(self.cpu.get_ref());
+        }
+    }
+
+    // Gets the aligned offset at the given index from the CPU buffer.
+    pub fn offset_at_index(&self, index: usize) -> wgpu::DynamicOffset {
+        let offset = self
+            .offsets
+            .get(index)
+            .copied()
+            .expect("Index not found in offsets.");
+
+        offset
+    }
+
+    /// Returns a reference to the GPU buffer.
+    pub fn raw(&self) -> &wgpu::Buffer {
+        &self.gpu
+    }
+
+    /// Reset the buffer.
+    pub fn clear(&mut self) {
+        self.offsets.clear();
+        self.cpu.clear();
+    }
+}
+
+// Currently supported dynamic buffers.
+enum Internal {
+    Uniform(encase::DynamicUniformBuffer<Vec<u8>>),
+    Storage(encase::DynamicStorageBuffer<Vec<u8>>),
+}
+
+impl Internal {
+    /// Writes the current value to its CPU buffer with proper alignment.
+    pub(super) fn write<T: ShaderType + WriteInto>(
+        &mut self,
+        value: &T,
+    ) -> wgpu::DynamicOffset {
+        match self {
+            Internal::Uniform(buf) => buf
+                .write(value)
+                .expect("Error when writing to dynamic uniform buffer.")
+                as u32,
+            Internal::Storage(buf) => buf
+                .write(value)
+                .expect("Error when writing to dynamic storage buffer.")
+                as u32,
+        }
+    }
+
+    /// Returns bytearray of aligned CPU buffer.
+    pub(super) fn get_ref(&self) -> &Vec<u8> {
+        match self {
+            Internal::Uniform(buf) => buf.as_ref(),
+            Internal::Storage(buf) => buf.as_ref(),
+        }
+    }
+
+    /// Resets the CPU buffer.
+    pub(super) fn clear(&mut self) {
+        match self {
+            Internal::Uniform(buf) => {
+                buf.as_mut().clear();
+                buf.set_offset(0);
+            }
+            Internal::Storage(buf) => {
+                buf.as_mut().clear();
+                buf.set_offset(0);
+            }
+        }
+    }
+}
diff --git a/wgpu/src/buffer/static.rs b/wgpu/src/buffer/static.rs
new file mode 100644
index 00000000..cf06790c
--- /dev/null
+++ b/wgpu/src/buffer/static.rs
@@ -0,0 +1,117 @@
+use bytemuck::{Pod, Zeroable};
+use std::marker::PhantomData;
+use std::mem;
+
+//128 triangles/indices
+const DEFAULT_STATIC_BUFFER_COUNT: wgpu::BufferAddress = 128;
+
+/// A generic buffer struct useful for items which have no alignment requirements
+/// (e.g. Vertex, Index buffers) & no dynamic offsets.
+#[derive(Debug)]
+pub(crate) struct Buffer<T> {
+    //stored sequentially per mesh iteration; refers to the offset index in the GPU buffer
+    offsets: Vec<wgpu::BufferAddress>,
+    label: &'static str,
+    usages: wgpu::BufferUsages,
+    gpu: wgpu::Buffer,
+    size: wgpu::BufferAddress,
+    _data: PhantomData<T>,
+}
+
+impl<T: Pod + Zeroable> Buffer<T> {
+    /// Initialize a new static buffer.
+    pub fn new(
+        device: &wgpu::Device,
+        label: &'static str,
+        usages: wgpu::BufferUsages,
+    ) -> Self {
+        let size = (mem::size_of::<T>() as u64) * DEFAULT_STATIC_BUFFER_COUNT;
+
+        Self {
+            offsets: Vec::new(),
+            label,
+            usages,
+            gpu: Self::gpu_buffer(device, label, size, usages),
+            size,
+            _data: PhantomData,
+        }
+    }
+
+    fn gpu_buffer(
+        device: &wgpu::Device,
+        label: &'static str,
+        size: wgpu::BufferAddress,
+        usage: wgpu::BufferUsages,
+    ) -> wgpu::Buffer {
+        device.create_buffer(&wgpu::BufferDescriptor {
+            label: Some(label),
+            size,
+            usage,
+            mapped_at_creation: false,
+        })
+    }
+
+    /// Returns whether or not the buffer needs to be recreated. This can happen whenever mesh data
+    /// changes & a redraw is requested.
+    pub fn resize(&mut self, device: &wgpu::Device, new_count: usize) -> bool {
+        let size = (mem::size_of::<T>() * new_count) as u64;
+
+        if self.size < size {
+            self.offsets.clear();
+            self.size = size;
+            self.gpu = Self::gpu_buffer(device, self.label, size, self.usages);
+            true
+        } else {
+            false
+        }
+    }
+
+    /// Writes the current vertex data to the gpu buffer with a memcpy & stores its offset.
+    ///
+    /// Returns the size of the written bytes.
+    pub fn write(
+        &mut self,
+        device: &wgpu::Device,
+        staging_belt: &mut wgpu::util::StagingBelt,
+        encoder: &mut wgpu::CommandEncoder,
+        offset: u64,
+        content: &[T],
+    ) -> u64 {
+        let bytes = bytemuck::cast_slice(content);
+        let bytes_size = bytes.len() as u64;
+
+        if let Some(buffer_size) = wgpu::BufferSize::new(bytes_size) {
+            let mut buffer = staging_belt.write_buffer(
+                encoder,
+                &self.gpu,
+                offset,
+                buffer_size,
+                device,
+            );
+
+            buffer.copy_from_slice(bytes);
+
+            self.offsets.push(offset);
+        }
+
+        bytes_size
+    }
+
+    fn offset_at(&self, index: usize) -> &wgpu::BufferAddress {
+        self.offsets
+            .get(index)
+            .expect("Offset at index does not exist.")
+    }
+
+    /// Returns the slice calculated from the offset stored at the given index.
+    /// e.g. to calculate the slice for the 2nd mesh in the layer, this would be the offset at index
+    /// 1 that we stored earlier when writing.
+    pub fn slice_from_index(&self, index: usize) -> wgpu::BufferSlice<'_> {
+        self.gpu.slice(self.offset_at(index)..)
+    }
+
+    /// Clears any temporary data from the buffer.
+    pub fn clear(&mut self) {
+        self.offsets.clear()
+    }
+}
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index 3a98c6bd..1295516b 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -43,6 +43,7 @@ pub mod triangle;
 pub mod window;
 
 mod backend;
+mod buffer;
 mod quad;
 mod text;
 
diff --git a/wgpu/src/shader/gradient.wgsl b/wgpu/src/shader/gradient.wgsl
new file mode 100644
index 00000000..63825aec
--- /dev/null
+++ b/wgpu/src/shader/gradient.wgsl
@@ -0,0 +1,88 @@
+struct Uniforms {
+    transform: mat4x4<f32>,
+    //xy = start, wz = end
+    position: vec4<f32>,
+    //x = start stop, y = end stop, zw = padding
+    stop_range: vec4<i32>,
+}
+
+struct Stop {
+    color: vec4<f32>,
+    offset: f32,
+};
+
+@group(0) @binding(0)
+var<uniform> uniforms: Uniforms;
+
+@group(0) @binding(1)
+var<storage, read> color_stops: array<Stop>;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) raw_position: vec2<f32>
+}
+
+@vertex
+fn vs_main(@location(0) input: vec2<f32>) -> VertexOutput {
+    var output: VertexOutput;
+    output.position = uniforms.transform * vec4<f32>(input.xy, 0.0, 1.0);
+    output.raw_position = input;
+
+    return output;
+}
+
+//TODO: rewrite without branching
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let start = uniforms.position.xy;
+    let end = uniforms.position.zw;
+    let start_stop = uniforms.stop_range.x;
+    let end_stop = uniforms.stop_range.y;
+
+    let v1 = end - start;
+    let v2 = input.raw_position.xy - start;
+    let unit = normalize(v1);
+    let offset = dot(unit, v2) / length(v1);
+
+    let min_stop = color_stops[start_stop];
+    let max_stop = color_stops[end_stop];
+
+    var color: vec4<f32>;
+
+    if (offset <= min_stop.offset) {
+        color = min_stop.color;
+    } else if (offset >= max_stop.offset) {
+        color = max_stop.color;
+    } else {
+        var min = min_stop;
+        var max = max_stop;
+        var min_index = start_stop;
+        var max_index = end_stop;
+
+        loop {
+            if (min_index >= max_index - 1) {
+                break;
+            }
+
+            let index = min_index + (max_index - min_index) / 2;
+
+            let stop = color_stops[index];
+
+            if (offset <= stop.offset) {
+                max = stop;
+                max_index = index;
+            } else {
+                min = stop;
+                min_index = index;
+            }
+        }
+
+        color = mix(min.color, max.color, smoothstep(
+            min.offset,
+            max.offset,
+            offset
+        ));
+    }
+
+    return color;
+}
diff --git a/wgpu/src/shader/solid.wgsl b/wgpu/src/shader/solid.wgsl
new file mode 100644
index 00000000..68a8fea3
--- /dev/null
+++ b/wgpu/src/shader/solid.wgsl
@@ -0,0 +1,17 @@
+struct Uniforms {
+    transform: mat4x4<f32>,
+    color: vec4<f32>
+}
+
+@group(0) @binding(0)
+var<uniform> uniforms: Uniforms;
+
+@vertex
+fn vs_main(@location(0) input: vec2<f32>) -> @builtin(position) vec4<f32> {
+    return uniforms.transform * vec4<f32>(input.xy, 0.0, 1.0);
+}
+
+@fragment
+fn fs_main() -> @location(0) vec4<f32> {
+    return uniforms.color;
+}
diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs
index fd06dddf..f9abf2b5 100644
--- a/wgpu/src/triangle.rs
+++ b/wgpu/src/triangle.rs
@@ -1,345 +1,176 @@
 //! Draw meshes of triangles.
-use crate::{settings, Transformation};
-use iced_graphics::layer;
-
-use bytemuck::{Pod, Zeroable};
-use std::mem;
+mod gradient;
+mod msaa;
+mod solid;
 
-pub use iced_graphics::triangle::{Mesh2D, Vertex2D};
+use crate::buffer::r#static::Buffer;
+use crate::settings;
+use crate::Transformation;
 
-mod msaa;
+use iced_graphics::layer::mesh::{self, Mesh};
+use iced_graphics::triangle::{self, Vertex2D};
+use iced_graphics::Size;
 
-const UNIFORM_BUFFER_SIZE: usize = 50;
-const VERTEX_BUFFER_SIZE: usize = 10_000;
-const INDEX_BUFFER_SIZE: usize = 10_000;
+use core::fmt;
+use std::fmt::Formatter;
 
+/// Triangle pipeline for all mesh layers in a [`iced_graphics::Canvas`] widget.
 #[derive(Debug)]
 pub(crate) struct Pipeline {
-    pipeline: wgpu::RenderPipeline,
     blit: Option<msaa::Blit>,
-    constants_layout: wgpu::BindGroupLayout,
-    constants: wgpu::BindGroup,
-    uniforms_buffer: Buffer<Uniforms>,
     vertex_buffer: Buffer<Vertex2D>,
     index_buffer: Buffer<u32>,
+    index_strides: Vec<u32>,
+    pipelines: PipelineList,
 }
 
-#[derive(Debug)]
-struct Buffer<T> {
-    label: &'static str,
-    raw: wgpu::Buffer,
-    size: usize,
-    usage: wgpu::BufferUsages,
-    _type: std::marker::PhantomData<T>,
+/// Supported triangle pipelines for different fills.
+pub(crate) struct PipelineList {
+    solid: solid::Pipeline,
+    gradient: gradient::Pipeline,
 }
 
-impl<T> Buffer<T> {
-    pub fn new(
-        label: &'static str,
-        device: &wgpu::Device,
-        size: usize,
-        usage: wgpu::BufferUsages,
-    ) -> Self {
-        let raw = device.create_buffer(&wgpu::BufferDescriptor {
-            label: Some(label),
-            size: (std::mem::size_of::<T>() * size) as u64,
-            usage,
-            mapped_at_creation: false,
-        });
-
-        Buffer {
-            label,
-            raw,
-            size,
-            usage,
-            _type: std::marker::PhantomData,
-        }
+impl fmt::Debug for PipelineList {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        f.debug_struct("TrianglePipelines").finish()
     }
+}
 
-    pub fn expand(&mut self, device: &wgpu::Device, size: usize) -> bool {
-        let needs_resize = self.size < size;
-
-        if needs_resize {
-            self.raw = device.create_buffer(&wgpu::BufferDescriptor {
-                label: Some(self.label),
-                size: (std::mem::size_of::<T>() * size) as u64,
-                usage: self.usage,
-                mapped_at_creation: false,
-            });
-
-            self.size = size;
-        }
+impl PipelineList {
+    /// Resets each pipeline's buffers.
+    fn clear(&mut self) {
+        self.solid.buffer.clear();
+        self.gradient.uniform_buffer.clear();
+        self.gradient.storage_buffer.clear();
+    }
 
-        needs_resize
+    /// Writes the contents of each pipeline's CPU buffer to the GPU, resizing the GPU buffer
+    /// beforehand if necessary.
+    fn write(
+        &mut self,
+        device: &wgpu::Device,
+        staging_belt: &mut wgpu::util::StagingBelt,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        self.solid.write(device, staging_belt, encoder);
+        self.gradient.write(device, staging_belt, encoder);
     }
 }
 
 impl Pipeline {
+    /// Creates supported pipelines, listed in [TrianglePipelines].
     pub fn new(
         device: &wgpu::Device,
         format: wgpu::TextureFormat,
         antialiasing: Option<settings::Antialiasing>,
     ) -> Pipeline {
-        let constants_layout =
-            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
-                label: Some("iced_wgpu::triangle uniforms layout"),
-                entries: &[wgpu::BindGroupLayoutEntry {
-                    binding: 0,
-                    visibility: wgpu::ShaderStages::VERTEX,
-                    ty: wgpu::BindingType::Buffer {
-                        ty: wgpu::BufferBindingType::Uniform,
-                        has_dynamic_offset: true,
-                        min_binding_size: wgpu::BufferSize::new(
-                            mem::size_of::<Uniforms>() as u64,
-                        ),
-                    },
-                    count: None,
-                }],
-            });
-
-        let constants_buffer = Buffer::new(
-            "iced_wgpu::triangle uniforms buffer",
-            device,
-            UNIFORM_BUFFER_SIZE,
-            wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
-        );
-
-        let constant_bind_group =
-            device.create_bind_group(&wgpu::BindGroupDescriptor {
-                label: Some("iced_wgpu::triangle uniforms bind group"),
-                layout: &constants_layout,
-                entries: &[wgpu::BindGroupEntry {
-                    binding: 0,
-                    resource: wgpu::BindingResource::Buffer(
-                        wgpu::BufferBinding {
-                            buffer: &constants_buffer.raw,
-                            offset: 0,
-                            size: wgpu::BufferSize::new(std::mem::size_of::<
-                                Uniforms,
-                            >(
-                            )
-                                as u64),
-                        },
-                    ),
-                }],
-            });
-
-        let layout =
-            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
-                label: Some("iced_wgpu::triangle pipeline layout"),
-                push_constant_ranges: &[],
-                bind_group_layouts: &[&constants_layout],
-            });
-
-        let shader =
-            device.create_shader_module(wgpu::ShaderModuleDescriptor {
-                label: Some("iced_wgpu::triangle::shader"),
-                source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
-                    include_str!("shader/triangle.wgsl"),
-                )),
-            });
-
-        let pipeline =
-            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
-                label: Some("iced_wgpu::triangle pipeline"),
-                layout: Some(&layout),
-                vertex: wgpu::VertexState {
-                    module: &shader,
-                    entry_point: "vs_main",
-                    buffers: &[wgpu::VertexBufferLayout {
-                        array_stride: mem::size_of::<Vertex2D>() as u64,
-                        step_mode: wgpu::VertexStepMode::Vertex,
-                        attributes: &wgpu::vertex_attr_array!(
-                            // Position
-                            0 => Float32x2,
-                            // Color
-                            1 => Float32x4,
-                        ),
-                    }],
-                },
-                fragment: Some(wgpu::FragmentState {
-                    module: &shader,
-                    entry_point: "fs_main",
-                    targets: &[Some(wgpu::ColorTargetState {
-                        format,
-                        blend: Some(wgpu::BlendState::ALPHA_BLENDING),
-                        write_mask: wgpu::ColorWrites::ALL,
-                    })],
-                }),
-                primitive: wgpu::PrimitiveState {
-                    topology: wgpu::PrimitiveTopology::TriangleList,
-                    front_face: wgpu::FrontFace::Cw,
-                    ..Default::default()
-                },
-                depth_stencil: None,
-                multisample: wgpu::MultisampleState {
-                    count: antialiasing.map(|a| a.sample_count()).unwrap_or(1),
-                    mask: !0,
-                    alpha_to_coverage_enabled: false,
-                },
-                multiview: None,
-            });
-
         Pipeline {
-            pipeline,
             blit: antialiasing.map(|a| msaa::Blit::new(device, format, a)),
-            constants_layout,
-            constants: constant_bind_group,
-            uniforms_buffer: constants_buffer,
             vertex_buffer: Buffer::new(
-                "iced_wgpu::triangle vertex buffer",
                 device,
-                VERTEX_BUFFER_SIZE,
+                "iced_wgpu::triangle vertex buffer",
                 wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
             ),
             index_buffer: Buffer::new(
-                "iced_wgpu::triangle index buffer",
                 device,
-                INDEX_BUFFER_SIZE,
+                "iced_wgpu::triangle vertex buffer",
                 wgpu::BufferUsages::INDEX | wgpu::BufferUsages::COPY_DST,
             ),
+            index_strides: Vec::new(),
+            pipelines: PipelineList {
+                solid: solid::Pipeline::new(device, format, antialiasing),
+                gradient: gradient::Pipeline::new(device, format, antialiasing),
+            },
         }
     }
 
+    /// Draws the contents of the current layer's meshes to the [target].
     pub fn draw(
         &mut self,
         device: &wgpu::Device,
         staging_belt: &mut wgpu::util::StagingBelt,
         encoder: &mut wgpu::CommandEncoder,
         target: &wgpu::TextureView,
-        target_width: u32,
-        target_height: u32,
+        target_size: Size<u32>,
         transformation: Transformation,
         scale_factor: f32,
-        meshes: &[layer::Mesh<'_>],
+        meshes: &[Mesh<'_>],
     ) {
-        // This looks a bit crazy, but we are just counting how many vertices
-        // and indices we will need to handle.
-        // TODO: Improve readability
-        let (total_vertices, total_indices) = meshes
-            .iter()
-            .map(|layer::Mesh { buffers, .. }| {
-                (buffers.vertices.len(), buffers.indices.len())
-            })
-            .fold((0, 0), |(total_v, total_i), (v, i)| {
-                (total_v + v, total_i + i)
-            });
-
-        // Then we ensure the current buffers are big enough, resizing if
-        // necessary
-        let _ = self.vertex_buffer.expand(device, total_vertices);
-        let _ = self.index_buffer.expand(device, total_indices);
-
-        // If the uniforms buffer is resized, then we need to recreate its
-        // bind group.
-        if self.uniforms_buffer.expand(device, meshes.len()) {
-            self.constants =
-                device.create_bind_group(&wgpu::BindGroupDescriptor {
-                    label: Some("iced_wgpu::triangle uniforms buffer"),
-                    layout: &self.constants_layout,
-                    entries: &[wgpu::BindGroupEntry {
-                        binding: 0,
-                        resource: wgpu::BindingResource::Buffer(
-                            wgpu::BufferBinding {
-                                buffer: &self.uniforms_buffer.raw,
-                                offset: 0,
-                                size: wgpu::BufferSize::new(
-                                    std::mem::size_of::<Uniforms>() as u64,
-                                ),
-                            },
-                        ),
-                    }],
-                });
-        }
+        //count the total amount of vertices & indices we need to handle
+        let (total_vertices, total_indices) = mesh::attribute_count_of(meshes);
 
-        let mut uniforms: Vec<Uniforms> = Vec::with_capacity(meshes.len());
-        let mut offsets: Vec<(
-            wgpu::BufferAddress,
-            wgpu::BufferAddress,
-            usize,
-        )> = Vec::with_capacity(meshes.len());
-        let mut last_vertex = 0;
-        let mut last_index = 0;
+        // Then we ensure the current attribute buffers are big enough, resizing if necessary.
 
-        // We upload everything upfront
-        for mesh in meshes {
-            let transform = (transformation
-                * Transformation::translate(mesh.origin.x, mesh.origin.y))
-            .into();
-
-            let vertices = bytemuck::cast_slice(&mesh.buffers.vertices);
-            let indices = bytemuck::cast_slice(&mesh.buffers.indices);
-
-            if let (Some(vertices_size), Some(indices_size)) = (
-                wgpu::BufferSize::new(vertices.len() as u64),
-                wgpu::BufferSize::new(indices.len() as u64),
-            ) {
-                {
-                    let mut vertex_buffer = staging_belt.write_buffer(
-                        encoder,
-                        &self.vertex_buffer.raw,
-                        (std::mem::size_of::<Vertex2D>() * last_vertex) as u64,
-                        vertices_size,
-                        device,
-                    );
-
-                    vertex_buffer.copy_from_slice(vertices);
-                }
+        //We are not currently using the return value of these functions as we have no system in
+        //place to calculate mesh diff, or to know whether or not that would be more performant for
+        //the majority of use cases. Therefore we will write GPU data every frame (for now).
+        let _ = self.vertex_buffer.resize(device, total_vertices);
+        let _ = self.index_buffer.resize(device, total_indices);
 
-                {
-                    let mut index_buffer = staging_belt.write_buffer(
-                        encoder,
-                        &self.index_buffer.raw,
-                        (std::mem::size_of::<u32>() * last_index) as u64,
-                        indices_size,
-                        device,
-                    );
+        //prepare dynamic buffers & data store for writing
+        self.index_strides.clear();
+        self.pipelines.clear();
 
-                    index_buffer.copy_from_slice(indices);
-                }
-
-                uniforms.push(transform);
-                offsets.push((
-                    last_vertex as u64,
-                    last_index as u64,
-                    mesh.buffers.indices.len(),
-                ));
+        let mut vertex_offset = 0;
+        let mut index_offset = 0;
 
-                last_vertex += mesh.buffers.vertices.len();
-                last_index += mesh.buffers.indices.len();
-            }
-        }
-
-        let uniforms = bytemuck::cast_slice(&uniforms);
+        for mesh in meshes {
+            let transform = transformation
+                * Transformation::translate(mesh.origin.x, mesh.origin.y);
 
-        if let Some(uniforms_size) =
-            wgpu::BufferSize::new(uniforms.len() as u64)
-        {
-            let mut uniforms_buffer = staging_belt.write_buffer(
+            //write to both buffers
+            let new_vertex_offset = self.vertex_buffer.write(
+                device,
+                staging_belt,
                 encoder,
-                &self.uniforms_buffer.raw,
-                0,
-                uniforms_size,
+                vertex_offset,
+                &mesh.buffers.vertices,
+            );
+
+            let new_index_offset = self.index_buffer.write(
                 device,
+                staging_belt,
+                encoder,
+                index_offset,
+                &mesh.buffers.indices,
             );
 
-            uniforms_buffer.copy_from_slice(uniforms);
+            vertex_offset += new_vertex_offset;
+            index_offset += new_index_offset;
+
+            self.index_strides.push(mesh.buffers.indices.len() as u32);
+
+            //push uniform data to CPU buffers
+            match mesh.style {
+                triangle::Style::Solid(color) => {
+                    self.pipelines.solid.push(transform, color);
+                }
+                triangle::Style::Gradient(gradient) => {
+                    self.pipelines.gradient.push(transform, gradient);
+                }
+            }
         }
 
+        //write uniform data to GPU
+        self.pipelines.write(device, staging_belt, encoder);
+
+        //configure the render pass now that the data is uploaded to the GPU
         {
-            let (attachment, resolve_target, load) =
-                if let Some(blit) = &mut self.blit {
-                    let (attachment, resolve_target) =
-                        blit.targets(device, target_width, target_height);
-
-                    (
-                        attachment,
-                        Some(resolve_target),
-                        wgpu::LoadOp::Clear(wgpu::Color::TRANSPARENT),
-                    )
-                } else {
-                    (target, None, wgpu::LoadOp::Load)
-                };
+            //configure antialiasing pass
+            let (attachment, resolve_target, load) = if let Some(blit) =
+                &mut self.blit
+            {
+                let (attachment, resolve_target) =
+                    blit.targets(device, target_size.width, target_size.height);
+
+                (
+                    attachment,
+                    Some(resolve_target),
+                    wgpu::LoadOp::Clear(wgpu::Color::TRANSPARENT),
+                )
+            } else {
+                (target, None, wgpu::LoadOp::Load)
+            };
 
             let mut render_pass =
                 encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
@@ -354,12 +185,12 @@ impl Pipeline {
                     depth_stencil_attachment: None,
                 });
 
-            render_pass.set_pipeline(&self.pipeline);
+            let mut num_solids = 0;
+            let mut num_gradients = 0;
+            let mut last_is_solid = None;
 
-            for (i, (vertex_offset, index_offset, indices)) in
-                offsets.into_iter().enumerate()
-            {
-                let clip_bounds = (meshes[i].clip_bounds * scale_factor).snap();
+            for (index, mesh) in meshes.iter().enumerate() {
+                let clip_bounds = (mesh.clip_bounds * scale_factor).snap();
 
                 render_pass.set_scissor_rect(
                     clip_bounds.x,
@@ -368,62 +199,105 @@ impl Pipeline {
                     clip_bounds.height,
                 );
 
-                render_pass.set_bind_group(
+                match mesh.style {
+                    triangle::Style::Solid(_) => {
+                        if !last_is_solid.unwrap_or(false) {
+                            self.pipelines
+                                .solid
+                                .set_render_pass_pipeline(&mut render_pass);
+
+                            last_is_solid = Some(true);
+                        }
+
+                        self.pipelines.solid.configure_render_pass(
+                            &mut render_pass,
+                            num_solids,
+                        );
+
+                        num_solids += 1;
+                    }
+                    triangle::Style::Gradient(_) => {
+                        if last_is_solid.unwrap_or(true) {
+                            self.pipelines
+                                .gradient
+                                .set_render_pass_pipeline(&mut render_pass);
+
+                            last_is_solid = Some(false);
+                        }
+
+                        self.pipelines.gradient.configure_render_pass(
+                            &mut render_pass,
+                            num_gradients,
+                        );
+
+                        num_gradients += 1;
+                    }
+                };
+
+                render_pass.set_vertex_buffer(
                     0,
-                    &self.constants,
-                    &[(std::mem::size_of::<Uniforms>() * i) as u32],
+                    self.vertex_buffer.slice_from_index(index),
                 );
 
                 render_pass.set_index_buffer(
-                    self.index_buffer
-                        .raw
-                        .slice(index_offset * mem::size_of::<u32>() as u64..),
+                    self.index_buffer.slice_from_index(index),
                     wgpu::IndexFormat::Uint32,
                 );
 
-                render_pass.set_vertex_buffer(
+                render_pass.draw_indexed(
+                    0..(self.index_strides[index] as u32),
                     0,
-                    self.vertex_buffer.raw.slice(
-                        vertex_offset * mem::size_of::<Vertex2D>() as u64..,
-                    ),
+                    0..1,
                 );
-
-                render_pass.draw_indexed(0..indices as u32, 0, 0..1);
             }
         }
 
+        self.vertex_buffer.clear();
+        self.index_buffer.clear();
+
         if let Some(blit) = &mut self.blit {
             blit.draw(encoder, target);
         }
     }
 }
 
-#[repr(C)]
-#[derive(Debug, Clone, Copy, Zeroable, Pod)]
-struct Uniforms {
-    transform: [f32; 16],
-    // We need to align this to 256 bytes to please `wgpu`...
-    // TODO: Be smarter and stop wasting memory!
-    _padding_a: [f32; 32],
-    _padding_b: [f32; 16],
+//utility functions for individual pipelines with shared functionality
+fn vertex_buffer_layout<'a>() -> wgpu::VertexBufferLayout<'a> {
+    wgpu::VertexBufferLayout {
+        array_stride: std::mem::size_of::<Vertex2D>() as u64,
+        step_mode: wgpu::VertexStepMode::Vertex,
+        attributes: &[wgpu::VertexAttribute {
+            format: wgpu::VertexFormat::Float32x2,
+            offset: 0,
+            shader_location: 0,
+        }],
+    }
 }
 
-impl Default for Uniforms {
-    fn default() -> Self {
-        Self {
-            transform: *Transformation::identity().as_ref(),
-            _padding_a: [0.0; 32],
-            _padding_b: [0.0; 16],
-        }
+fn fragment_target(
+    texture_format: wgpu::TextureFormat,
+) -> Option<wgpu::ColorTargetState> {
+    Some(wgpu::ColorTargetState {
+        format: texture_format,
+        blend: Some(wgpu::BlendState::ALPHA_BLENDING),
+        write_mask: wgpu::ColorWrites::ALL,
+    })
+}
+
+fn primitive_state() -> wgpu::PrimitiveState {
+    wgpu::PrimitiveState {
+        topology: wgpu::PrimitiveTopology::TriangleList,
+        front_face: wgpu::FrontFace::Cw,
+        ..Default::default()
     }
 }
 
-impl From<Transformation> for Uniforms {
-    fn from(transformation: Transformation) -> Uniforms {
-        Self {
-            transform: transformation.into(),
-            _padding_a: [0.0; 32],
-            _padding_b: [0.0; 16],
-        }
+fn multisample_state(
+    antialiasing: Option<settings::Antialiasing>,
+) -> wgpu::MultisampleState {
+    wgpu::MultisampleState {
+        count: antialiasing.map(|a| a.sample_count()).unwrap_or(1),
+        mask: !0,
+        alpha_to_coverage_enabled: false,
     }
 }
diff --git a/wgpu/src/triangle/gradient.rs b/wgpu/src/triangle/gradient.rs
new file mode 100644
index 00000000..b06cbac6
--- /dev/null
+++ b/wgpu/src/triangle/gradient.rs
@@ -0,0 +1,268 @@
+use crate::buffer::dynamic;
+use crate::settings;
+use crate::triangle;
+use encase::ShaderType;
+use glam::{IVec4, Vec4};
+use iced_graphics::gradient::Gradient;
+use iced_graphics::Transformation;
+
+pub struct Pipeline {
+    pipeline: wgpu::RenderPipeline,
+    pub(super) uniform_buffer: dynamic::Buffer<Uniforms>,
+    pub(super) storage_buffer: dynamic::Buffer<Storage>,
+    color_stop_offset: i32,
+    //Need to store these and then write them all at once
+    //or else they will be padded to 256 and cause gaps in the storage buffer
+    color_stops_pending_write: Storage,
+    bind_group_layout: wgpu::BindGroupLayout,
+    bind_group: wgpu::BindGroup,
+}
+
+#[derive(Debug, ShaderType)]
+pub(super) struct Uniforms {
+    transform: glam::Mat4,
+    //xy = start, zw = end
+    direction: Vec4,
+    //x = start stop, y = end stop, zw = padding
+    stop_range: IVec4,
+}
+
+#[derive(Debug, ShaderType)]
+pub(super) struct ColorStop {
+    color: Vec4,
+    offset: f32,
+}
+
+#[derive(ShaderType)]
+pub(super) struct Storage {
+    #[size(runtime)]
+    pub color_stops: Vec<ColorStop>,
+}
+
+impl Pipeline {
+    /// Creates a new [GradientPipeline] using `gradient.wgsl` shader.
+    pub(super) fn new(
+        device: &wgpu::Device,
+        format: wgpu::TextureFormat,
+        antialiasing: Option<settings::Antialiasing>,
+    ) -> Self {
+        let uniform_buffer = dynamic::Buffer::uniform(
+            device,
+            "iced_wgpu::triangle::gradient uniforms",
+        );
+
+        //Note: with a WASM target storage buffers are not supported. Will need to use UBOs & static
+        // sized array (eg like the 32-sized array on OpenGL side right now) to make gradients work
+        let storage_buffer = dynamic::Buffer::storage(
+            device,
+            "iced_wgpu::triangle::gradient storage",
+        );
+
+        let bind_group_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                label: Some("iced_wgpu::triangle::gradient bind group layout"),
+                entries: &[
+                    wgpu::BindGroupLayoutEntry {
+                        binding: 0,
+                        visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                        ty: wgpu::BindingType::Buffer {
+                            ty: wgpu::BufferBindingType::Uniform,
+                            has_dynamic_offset: true,
+                            min_binding_size: Some(Uniforms::min_size()),
+                        },
+                        count: None,
+                    },
+                    wgpu::BindGroupLayoutEntry {
+                        binding: 1,
+                        visibility: wgpu::ShaderStages::FRAGMENT,
+                        ty: wgpu::BindingType::Buffer {
+                            ty: wgpu::BufferBindingType::Storage {
+                                read_only: true,
+                            },
+                            has_dynamic_offset: false,
+                            min_binding_size: Some(Storage::min_size()),
+                        },
+                        count: None,
+                    },
+                ],
+            });
+
+        let bind_group = Pipeline::bind_group(
+            device,
+            uniform_buffer.raw(),
+            storage_buffer.raw(),
+            &bind_group_layout,
+        );
+
+        let layout =
+            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                label: Some("iced_wgpu::triangle::gradient pipeline layout"),
+                bind_group_layouts: &[&bind_group_layout],
+                push_constant_ranges: &[],
+            });
+
+        let shader =
+            device.create_shader_module(wgpu::ShaderModuleDescriptor {
+                label: Some(
+                    "iced_wgpu::triangle::gradient create shader module",
+                ),
+                source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
+                    include_str!("../shader/gradient.wgsl"),
+                )),
+            });
+
+        let pipeline =
+            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+                label: Some("iced_wgpu::triangle::gradient pipeline"),
+                layout: Some(&layout),
+                vertex: wgpu::VertexState {
+                    module: &shader,
+                    entry_point: "vs_main",
+                    buffers: &[triangle::vertex_buffer_layout()],
+                },
+                fragment: Some(wgpu::FragmentState {
+                    module: &shader,
+                    entry_point: "fs_main",
+                    targets: &[triangle::fragment_target(format)],
+                }),
+                primitive: triangle::primitive_state(),
+                depth_stencil: None,
+                multisample: triangle::multisample_state(antialiasing),
+                multiview: None,
+            });
+
+        Self {
+            pipeline,
+            uniform_buffer,
+            storage_buffer,
+            color_stop_offset: 0,
+            color_stops_pending_write: Storage {
+                color_stops: vec![],
+            },
+            bind_group_layout,
+            bind_group,
+        }
+    }
+
+    /// Pushes a new gradient uniform to the CPU buffer.
+    pub fn push(&mut self, transform: Transformation, gradient: &Gradient) {
+        match gradient {
+            Gradient::Linear(linear) => {
+                let start_offset = self.color_stop_offset;
+                let end_offset =
+                    (linear.color_stops.len() as i32) + start_offset - 1;
+
+                self.uniform_buffer.push(&Uniforms {
+                    transform: transform.into(),
+                    direction: Vec4::new(
+                        linear.start.x,
+                        linear.start.y,
+                        linear.end.x,
+                        linear.end.y,
+                    ),
+                    stop_range: IVec4::new(start_offset, end_offset, 0, 0),
+                });
+
+                self.color_stop_offset = end_offset + 1;
+
+                let stops: Vec<ColorStop> = linear
+                    .color_stops
+                    .iter()
+                    .map(|stop| {
+                        let [r, g, b, a] = stop.color.into_linear();
+
+                        ColorStop {
+                            offset: stop.offset,
+                            color: Vec4::new(r, g, b, a),
+                        }
+                    })
+                    .collect();
+
+                self.color_stops_pending_write.color_stops.extend(stops);
+            }
+        }
+    }
+
+    fn bind_group(
+        device: &wgpu::Device,
+        uniform_buffer: &wgpu::Buffer,
+        storage_buffer: &wgpu::Buffer,
+        layout: &wgpu::BindGroupLayout,
+    ) -> wgpu::BindGroup {
+        device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("iced_wgpu::triangle::gradient bind group"),
+            layout,
+            entries: &[
+                wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::Buffer(
+                        wgpu::BufferBinding {
+                            buffer: uniform_buffer,
+                            offset: 0,
+                            size: Some(Uniforms::min_size()),
+                        },
+                    ),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 1,
+                    resource: storage_buffer.as_entire_binding(),
+                },
+            ],
+        })
+    }
+
+    /// Writes the contents of the gradient CPU buffer to the GPU buffer, resizing the GPU buffer
+    /// beforehand if necessary.
+    pub fn write(
+        &mut self,
+        device: &wgpu::Device,
+        staging_belt: &mut wgpu::util::StagingBelt,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        //first write the pending color stops to the CPU buffer
+        self.storage_buffer.push(&self.color_stops_pending_write);
+
+        //resize buffers if needed
+        let uniforms_resized = self.uniform_buffer.resize(device);
+        let storage_resized = self.storage_buffer.resize(device);
+
+        if uniforms_resized || storage_resized {
+            //recreate bind groups if any buffers were resized
+            self.bind_group = Pipeline::bind_group(
+                device,
+                self.uniform_buffer.raw(),
+                self.storage_buffer.raw(),
+                &self.bind_group_layout,
+            );
+        }
+
+        //write to GPU
+        self.uniform_buffer.write(device, staging_belt, encoder);
+        self.storage_buffer.write(device, staging_belt, encoder);
+
+        //cleanup
+        self.color_stop_offset = 0;
+        self.color_stops_pending_write.color_stops.clear();
+    }
+
+    pub fn set_render_pass_pipeline<'a>(
+        &'a self,
+        render_pass: &mut wgpu::RenderPass<'a>,
+    ) {
+        render_pass.set_pipeline(&self.pipeline);
+    }
+
+    /// Configures the current render pass to draw the gradient at its offset stored in the
+    /// [DynamicBuffer] at [index].
+    pub fn configure_render_pass<'a>(
+        &'a self,
+        render_pass: &mut wgpu::RenderPass<'a>,
+        count: usize,
+    ) {
+        render_pass.set_bind_group(
+            0,
+            &self.bind_group,
+            &[self.uniform_buffer.offset_at_index(count)],
+        )
+    }
+}
diff --git a/wgpu/src/triangle/solid.rs b/wgpu/src/triangle/solid.rs
new file mode 100644
index 00000000..2e1052f2
--- /dev/null
+++ b/wgpu/src/triangle/solid.rs
@@ -0,0 +1,170 @@
+use crate::buffer::dynamic;
+use crate::triangle;
+use crate::{settings, Color};
+use encase::ShaderType;
+use glam::Vec4;
+use iced_graphics::Transformation;
+
+pub struct Pipeline {
+    pipeline: wgpu::RenderPipeline,
+    pub(super) buffer: dynamic::Buffer<Uniforms>,
+    bind_group_layout: wgpu::BindGroupLayout,
+    bind_group: wgpu::BindGroup,
+}
+
+#[derive(Debug, Clone, Copy, ShaderType)]
+pub(super) struct Uniforms {
+    transform: glam::Mat4,
+    color: Vec4,
+}
+
+impl Uniforms {
+    pub fn new(transform: Transformation, color: Color) -> Self {
+        let [r, g, b, a] = color.into_linear();
+
+        Self {
+            transform: transform.into(),
+            color: Vec4::new(r, g, b, a),
+        }
+    }
+}
+
+impl Pipeline {
+    /// Creates a new [SolidPipeline] using `solid.wgsl` shader.
+    pub fn new(
+        device: &wgpu::Device,
+        format: wgpu::TextureFormat,
+        antialiasing: Option<settings::Antialiasing>,
+    ) -> Self {
+        let buffer = dynamic::Buffer::uniform(
+            device,
+            "iced_wgpu::triangle::solid uniforms",
+        );
+
+        let bind_group_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                label: Some("iced_wgpu::triangle::solid bind group layout"),
+                entries: &[wgpu::BindGroupLayoutEntry {
+                    binding: 0,
+                    visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                    ty: wgpu::BindingType::Buffer {
+                        ty: wgpu::BufferBindingType::Uniform,
+                        has_dynamic_offset: true,
+                        min_binding_size: Some(Uniforms::min_size()),
+                    },
+                    count: None,
+                }],
+            });
+
+        let bind_group =
+            Pipeline::bind_group(device, buffer.raw(), &bind_group_layout);
+
+        let layout =
+            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                label: Some("iced_wgpu::triangle::solid pipeline layout"),
+                bind_group_layouts: &[&bind_group_layout],
+                push_constant_ranges: &[],
+            });
+
+        let shader =
+            device.create_shader_module(wgpu::ShaderModuleDescriptor {
+                label: Some("iced_wgpu::triangle::solid create shader module"),
+                source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
+                    include_str!("../shader/solid.wgsl"),
+                )),
+            });
+
+        let pipeline =
+            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+                label: Some("iced_wgpu::triangle::solid pipeline"),
+                layout: Some(&layout),
+                vertex: wgpu::VertexState {
+                    module: &shader,
+                    entry_point: "vs_main",
+                    buffers: &[triangle::vertex_buffer_layout()],
+                },
+                fragment: Some(wgpu::FragmentState {
+                    module: &shader,
+                    entry_point: "fs_main",
+                    targets: &[triangle::fragment_target(format)],
+                }),
+                primitive: triangle::primitive_state(),
+                depth_stencil: None,
+                multisample: triangle::multisample_state(antialiasing),
+                multiview: None,
+            });
+
+        Self {
+            pipeline,
+            buffer,
+            bind_group_layout,
+            bind_group,
+        }
+    }
+
+    fn bind_group(
+        device: &wgpu::Device,
+        buffer: &wgpu::Buffer,
+        layout: &wgpu::BindGroupLayout,
+    ) -> wgpu::BindGroup {
+        device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("iced_wgpu::triangle::solid bind group"),
+            layout,
+            entries: &[wgpu::BindGroupEntry {
+                binding: 0,
+                resource: wgpu::BindingResource::Buffer(wgpu::BufferBinding {
+                    buffer,
+                    offset: 0,
+                    size: Some(Uniforms::min_size()),
+                }),
+            }],
+        })
+    }
+
+    /// Pushes a new solid uniform to the CPU buffer.
+    pub fn push(&mut self, transform: Transformation, color: &Color) {
+        self.buffer.push(&Uniforms::new(transform, *color));
+    }
+
+    /// Writes the contents of the solid CPU buffer to the GPU buffer, resizing the GPU buffer
+    /// beforehand if necessary.
+    pub fn write(
+        &mut self,
+        device: &wgpu::Device,
+        staging_belt: &mut wgpu::util::StagingBelt,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        let uniforms_resized = self.buffer.resize(device);
+
+        if uniforms_resized {
+            self.bind_group = Pipeline::bind_group(
+                device,
+                self.buffer.raw(),
+                &self.bind_group_layout,
+            )
+        }
+
+        self.buffer.write(device, staging_belt, encoder);
+    }
+
+    pub fn set_render_pass_pipeline<'a>(
+        &'a self,
+        render_pass: &mut wgpu::RenderPass<'a>,
+    ) {
+        render_pass.set_pipeline(&self.pipeline);
+    }
+
+    /// Configures the current render pass to draw the solid at its offset stored in the
+    /// [DynamicBuffer] at [index].
+    pub fn configure_render_pass<'a>(
+        &'a self,
+        render_pass: &mut wgpu::RenderPass<'a>,
+        count: usize,
+    ) {
+        render_pass.set_bind_group(
+            0,
+            &self.bind_group,
+            &[self.buffer.offset_at_index(count)],
+        )
+    }
+}