stacked_gradients/
stacked_gradients.rs

1//! An example demonstrating overlaid gradients
2
3use bevy::color::palettes::css::BLUE;
4use bevy::color::palettes::css::RED;
5use bevy::color::palettes::css::YELLOW;
6use bevy::prelude::*;
7use core::f32::consts::TAU;
8
9fn main() {
10    App::new()
11        .add_plugins(DefaultPlugins)
12        .add_systems(Startup, setup)
13        .run();
14}
15
16fn setup(mut commands: Commands) {
17    commands.spawn(Camera2d);
18    commands
19        .spawn(Node {
20            display: Display::Grid,
21            width: percent(100),
22            height: percent(100),
23
24            ..Default::default()
25        })
26        .with_children(|commands| {
27            commands.spawn((
28                Node {
29                    width: percent(100),
30                    height: percent(100),
31                    ..Default::default()
32                },
33                BackgroundColor(Color::BLACK),
34                BackgroundGradient(vec![
35                    LinearGradient::to_top_right(vec![
36                        ColorStop::auto(RED),
37                        ColorStop::auto(RED.with_alpha(0.)),
38                    ])
39                    .into(),
40                    LinearGradient::to_top_left(vec![
41                        ColorStop::auto(BLUE),
42                        ColorStop::auto(BLUE.with_alpha(0.)),
43                    ])
44                    .into(),
45                    ConicGradient {
46                        start: 0.,
47                        position: UiPosition::CENTER,
48                        stops: vec![
49                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
50                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
51                            AngularColorStop::auto(YELLOW),
52                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
53                            AngularColorStop::auto(YELLOW.with_alpha(0.)),
54                        ],
55                        ..Default::default()
56                    }
57                    .into(),
58                    RadialGradient {
59                        position: UiPosition::TOP.at_x(percent(5)),
60                        shape: RadialGradientShape::Circle(vh(30)),
61                        stops: vec![
62                            ColorStop::auto(Color::WHITE),
63                            ColorStop::auto(YELLOW),
64                            ColorStop::auto(YELLOW.with_alpha(0.1)),
65                            ColorStop::auto(YELLOW.with_alpha(0.)),
66                        ],
67                        ..Default::default()
68                    }
69                    .into(),
70                    LinearGradient {
71                        angle: TAU / 16.,
72                        stops: vec![
73                            ColorStop::auto(Color::BLACK),
74                            ColorStop::auto(Color::BLACK.with_alpha(0.)),
75                        ],
76                        ..Default::default()
77                    }
78                    .into(),
79                    LinearGradient {
80                        angle: 15. * TAU / 16.,
81                        stops: vec![
82                            ColorStop::auto(Color::BLACK),
83                            ColorStop::auto(Color::BLACK.with_alpha(0.)),
84                        ],
85                        ..Default::default()
86                    }
87                    .into(),
88                ]),
89            ));
90        });
91}
stacked_gradients/stacked_gradients.rs

stacked_gradients/
stacked_gradients.rs
