Shadow support

[j-f1]

public func shadow(
  color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33),
  radius: CGFloat,
  x: CGFloat = 0, y: CGFloat = 0
) -> some View

Adds a shadow to this view.

The example below a series shows of boxes with increasing degrees of shadow ranging from 0 (no shadow) to 5 points of shadow, offset down and to the right of the views:

struct Shadow: View {
    var body: some View {
        HStack {
            ForEach(0..<6) {
                Color.red.frame(width: 60, height: 60, alignment: .center)
                    .overlay(Text("\($0)"),
                             alignment: .bottom)
                    .shadow(color: Color.gray,
                            radius: 1.0,
                            x: CGFloat($0),
                            y: CGFloat($0))
            }
        }
    }
}

• Parameters:
  • color: The shadow's color.
  • radius: The shadow's size.
  • x: A horizontal offset you use to position the shadow relative to
    this view.
  • y: A vertical offset you use to position the shadow relative to this
    view.
• Returns: A view that adds a shadow to this view.

[literalpie]

I started on this, but it may be difficult because of the differences between web shadows and SwiftUI shadows.
On the web, a text-shadow is distinct from a box-shadow, while SwiftUI applies a shadow to whatever the content of the view is. You can even put a shadow around the border of an element, which would be pretty difficult in HTML

Does anyone have ideas on how this could be done? I imagine it may need to detect the content of the view somehow, which would add a lot of complexity. (for example, add a text-shadow if the content is text, box-shadow in other cases, etc.)
Alternatively, do you have thoughts on which use-case should be implemented first, if it's okay to start with an incomplete implementation (for example, I could do something that satisfies the example given in this issue description, but not other cases like text and borders).

[MaxDesiatov]

@foscomputerservices did you stumble upon a need for shadows support by any chance? Maybe you could give an example which you'd like to see support first if so?

I personally am perfectly fine with supporting a limited subset at first. Just a simple box-shadow everywhere, and we can tackle text-shadow and more complex cases with borders later in separate PRs, if that makes sense?

[carson-katri]

What if you stick the shadow properties in the environment, then when a view that supports shadows (such as Text or Shape) is found, it applies the shadow with the necessary CSS (text-shadow, box-shadow, some SVG filter, etc.), and clears the environment so nothing further nested receives it.

[literalpie]

I like the environment suggestion, but I think I'm going to start with a PR that only handles box-shadow as Max suggested.

Additionally, I've been trying to figure out how the shadow values map from SwiftUI (radius) to CSS (blur radius + spread radius). I'm going to start with using only blur radius even though it doesn't match the SwiftUI behavior (especially for very high values and when there's an offset).

Here's some of the mapping's I've found by manually changing css values (and using color meter to test that colors match). Maybe someone can use this to find a pattern.

SwiftUI shadow radius	CSS shadow spread (px)	CSS shadow blur (px)
1	2	0
5	8	-1
10	13	-2
20	19	-1
40	33	3
60	41	2
80	60	6
80 (alternative)	53	3

[foscomputerservices]

@foscomputerservices did you stumble upon a need for shadows support by any chance? Maybe you could give an example which you'd like to see support first if so?

Thank you for asking! No. We do not use shadows at this time.

[MaxDesiatov]

Do we need separate issues for more complex cases, or should I reopen this one?