CSS-like shadows with offset, spread, and blur (#4232)

This makes `epaint::Shadow` more like CSS's box-shadow, adding `offset`
and replacing `extrusion` with `blur` and `spread`.

* Closes https://github.com/emilk/egui/pull/3047

The offsets make for nice drop-shadow effects.

Old shadows:
<img width="1447" alt="old-shadows"
src="https://github.com/emilk/egui/assets/1148717/8a30f7b9-fb9d-49ea-9a2f-9367a60c448a">

New shadows:
<img width="1447" alt="new-shadows-full"
src="https://github.com/emilk/egui/assets/1148717/28cc9c1e-b0de-4c5b-a705-22e52c556584">

crates/egui/src/containers/area.rs

@@ -423,7 +423,7 @@ impl Prepared {
                 .at_least(self.state.left_top_pos() + Vec2::splat(32.0)),
         );
 
-        let shadow_radius = ctx.style().visuals.window_shadow.extrusion; // hacky
+        let shadow_radius = ctx.style().visuals.window_shadow.margin().sum().max_elem(); // hacky
         let clip_rect_margin = ctx.style().visuals.clip_rect_margin.max(shadow_radius);
 
         let clip_rect = Rect::from_min_max(self.state.left_top_pos(), constrain_rect.max)

crates/egui/src/style.rs

@@ -1071,7 +1071,12 @@ impl Visuals {
             error_fg_color: Color32::from_rgb(255, 0, 0),  // red
 
             window_rounding: Rounding::same(6.0),
-            window_shadow: Shadow::big_dark(),
+            window_shadow: Shadow {
+                offset: vec2(10.0, 20.0),
+                blur: 15.0,
+                spread: 0.0,
+                color: Color32::from_black_alpha(96),
+            },
             window_fill: Color32::from_gray(27),
             window_stroke: Stroke::new(1.0, Color32::from_gray(60)),
             window_highlight_topmost: true,
@@ -1080,10 +1085,18 @@ impl Visuals {
 
             panel_fill: Color32::from_gray(27),
 
-            popup_shadow: Shadow::small_dark(),
+            popup_shadow: Shadow {
+                offset: vec2(6.0, 10.0),
+                blur: 8.0,
+                spread: 0.0,
+                color: Color32::from_black_alpha(96),
+            },
+
             resize_corner_size: 12.0,
+
             text_cursor: Stroke::new(2.0, Color32::from_rgb(192, 222, 255)),
             text_cursor_preview: false,
+
             clip_rect_margin: 3.0, // should be at least half the size of the widest frame stroke + max WidgetVisuals::expansion
             button_frame: true,
             collapsing_header_frame: false,
@@ -1115,14 +1128,26 @@ impl Visuals {
             warn_fg_color: Color32::from_rgb(255, 100, 0), // slightly orange red. it's difficult to find a warning color that pops on bright background.
             error_fg_color: Color32::from_rgb(255, 0, 0),  // red
 
-            window_shadow: Shadow::big_light(),
+            window_shadow: Shadow {
+                offset: vec2(10.0, 20.0),
+                blur: 15.0,
+                spread: 0.0,
+                color: Color32::from_black_alpha(25),
+            },
             window_fill: Color32::from_gray(248),
             window_stroke: Stroke::new(1.0, Color32::from_gray(190)),
 
             panel_fill: Color32::from_gray(248),
 
-            popup_shadow: Shadow::small_light(),
+            popup_shadow: Shadow {
+                offset: vec2(6.0, 10.0),
+                blur: 8.0,
+                spread: 0.0,
+                color: Color32::from_black_alpha(25),
+            },
+
             text_cursor: Stroke::new(2.0, Color32::from_rgb(0, 83, 125)),
+
             ..Self::dark()
         }
     }

crates/egui/src/widgets/mod.rs

@@ -126,15 +126,44 @@ pub fn stroke_ui(ui: &mut crate::Ui, stroke: &mut epaint::Stroke, text: &str) {
 }
 
 pub(crate) fn shadow_ui(ui: &mut Ui, shadow: &mut epaint::Shadow, text: &str) {
-    let epaint::Shadow { extrusion, color } = shadow;
-    ui.horizontal(|ui| {
-        ui.label(text);
-        ui.add(
-            DragValue::new(extrusion)
-                .speed(1.0)
-                .clamp_range(0.0..=100.0),
-        )
-        .on_hover_text("Extrusion");
+    let epaint::Shadow {
+        offset,
+        blur,
+        spread,
+        color,
+    } = shadow;
+
+    ui.label(text);
+    ui.indent(text, |ui| {
+        crate::Grid::new("shadow_ui").show(ui, |ui| {
+            ui.add(
+                DragValue::new(&mut offset.x)
+                    .speed(1.0)
+                    .clamp_range(-100.0..=100.0)
+                    .prefix("x: "),
+            );
+            ui.add(
+                DragValue::new(&mut offset.y)
+                    .speed(1.0)
+                    .clamp_range(-100.0..=100.0)
+                    .prefix("y: "),
+            );
+            ui.end_row();
+
+            ui.add(
+                DragValue::new(blur)
+                    .speed(1.0)
+                    .clamp_range(0.0..=100.0)
+                    .prefix("Blur:"),
+            );
+
+            ui.add(
+                DragValue::new(spread)
+                    .speed(1.0)
+                    .clamp_range(0.0..=100.0)
+                    .prefix("Spread:"),
+            );
+        });
         ui.color_edit_button_srgba(color);
     });
 }