Skip to content

Instantly share code, notes, and snippets.

@yosshi4486
Created March 31, 2025 07:09
Show Gist options
  • Save yosshi4486/140e1246e3226f274c69a156ddc9be14 to your computer and use it in GitHub Desktop.
Save yosshi4486/140e1246e3226f274c69a156ddc9be14 to your computer and use it in GitHub Desktop.
FloatingCard. Inspired from this https://x.com/yuki_arano/status/1906563933999337588
struct ContentView: View {
var body: some View {
FloatingCard {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
}
struct FloatingCard<Content : View>: View {
var content: () -> Content
var body: some View {
self.content()
.padding()
.background {
RoundedRectangle(cornerRadius: 10)
.fill(Color(UIColor.tertiarySystemGroupedBackground))
.shadow(color: .black.opacity(0.1), radius: 4, y: 4)
.shadow(color: .black.opacity(0.1), radius: 16, y: 4)
}
.overlay {
LinearGradient(
colors:[
Color(UIColor.white),
Color(UIColor.tertiarySystemGroupedBackground)
],
startPoint: .top,
endPoint: .bottom
)
.mask {
RoundedRectangle(cornerRadius: 10)
.fill(.clear)
.stroke(.black, style: .init(lineWidth: 1))
}
}
}
}
#Preview {
ContentView()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment