Gradient backgrounds

In CSS you can give an element a gradient background as follows:

background: linear-gradient(#e66465, #9198e5);

What’d be the easiest way to replicate gradient backgrounds in Iced, enabling layouts such as the one below?

Our Background type has a Gradient variant.

Aha, thanks. For those finding this thread in the future but missing more specific guidance, I’d check out this example.

To give people a visual reference, here’s something I tried:

        container(text("Hello world"))
            .style(move |_: &_| {
                let gradient = gradient::Linear::new(Radians(0.0))
                    .add_stop(0.0, Color::new(1.0, 0.0, 0.0, 1.0))
                    .add_stop(1.0, Color::new(0.0, 1.0, 0.0, 1.0))

                container::Appearance {
                    background: Some(Background::Gradient(gradient)),

You’ll need to set iced::Length::Fill on the width and height of the container to ensure the gradient stretches all the way across the screen.