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?
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"))
.width(Length::Fill)
.height(Length::Fill)
.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))
.into();
container::Appearance {
background: Some(Background::Gradient(gradient)),
..Default::default()
}
})
.padding(10)
.into()
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.
2 Likes