Your first glass text
Let’s create a simple glass text effect to get you started with GlassText.
Import GlassText
Add the import statement at the top of your SwiftUI view file:import SwiftUI
import GlassText
Create a basic glass text view
Use the GlassText initializer with a string and glass effect:struct ContentView: View {
var body: some View {
GlassText("Hello, World!", glass: .regular)
.font(.largeTitle)
.fontWeight(.bold)
}
}
For best results, place glass text over colorful or textured backgrounds where the glass effect can shine.
Add a background
Glass effects look best over vibrant backgrounds. Add a gradient or image:struct ContentView: View {
var body: some View {
GlassText("Hello, World!", glass: .regular)
.font(.largeTitle)
.fontWeight(.bold)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
LinearGradient(
gradient: Gradient(colors: [.blue, .purple]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
}
}
Run your app
Build and run your app to see the glass text effect in action!
Glass effect options
GlassText supports three glass effect types:
GlassText("Clear Glass")
// Default - subtle glass effect
Customize fonts
GlassText uses SwiftUI’s font system, giving you complete control over typography:
Font designs
VStack(spacing: 20) {
GlassText("Default Design", glass: .regular)
.fontDesign(.default)
GlassText("Serif Design", glass: .regular)
.fontDesign(.serif)
GlassText("Monospaced Design", glass: .regular)
.fontDesign(.monospaced)
GlassText("Rounded Design", glass: .regular)
.fontDesign(.rounded)
}
Font weights
VStack(spacing: 15) {
GlassText("Light Weight", glass: .regular)
.fontWeight(.light)
GlassText("Regular Weight", glass: .regular)
.fontWeight(.regular)
GlassText("Bold Weight", glass: .regular)
.fontWeight(.bold)
GlassText("Heavy Weight", glass: .regular)
.fontWeight(.heavy)
}
GlassText supports all SwiftUI font weights: ultraLight, thin, light, regular, medium, semibold, bold, heavy, and black.
Custom font sizes
GlassText("Custom Glass Text", glass: .regular.tint(.cyan))
.font(.system(size: 48, weight: .bold, design: .rounded))
Advanced example
Here’s a complete example showing multiple glass text elements with different styles:
import SwiftUI
import GlassText
struct GlassTextDemo: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 20) {
GlassText("Glass 2048", glass: .regular)
.font(.system(size: 44))
.fontWeight(.heavy)
.fontDesign(.rounded)
VStack(spacing: 15) {
GlassText("Light", glass: .regular.tint(.cyan))
.font(.system(size: 36).weight(.light))
.fontDesign(.rounded)
GlassText("Bold", glass: .regular.tint(.orange))
.font(.system(size: 36).weight(.bold))
.fontDesign(.rounded)
GlassText("Heavy", glass: .regular.tint(.purple))
.font(.system(size: 36).weight(.heavy))
.fontDesign(.rounded)
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background {
AsyncImage(url: URL(string: "your-image-url")) { image in
image
.resizable()
.scaledToFill()
.ignoresSafeArea()
} placeholder: {
Color.gray.opacity(0.2)
}
}
}
}
Multi-line text
GlassText automatically handles multi-line text with proper alignment:
GlassText("""
Multi-line
Glass Text
Effect
""", glass: .regular)
.font(.system(size: 36, weight: .semibold))
.fontDesign(.serif)
.multilineTextAlignment(.center)
Text alignment
Control text alignment using the standard SwiftUI modifier:
GlassText("Left Aligned", glass: .regular)
.multilineTextAlignment(.leading)
Localization
GlassText supports localized strings through LocalizedStringResource:
GlassText("localized.text.key", glass: .regular)
.font(.title)
.fontWeight(.medium)
Best practices
Use vibrant backgrounds
Glass effects are most visible over colorful gradients or textured images
Choose appropriate tints
Select tint colors that complement your background for better contrast
Consider font weight
Heavier font weights create more pronounced glass effects
Test on device
Glass effects may appear differently on actual devices vs. simulator
Next steps
API reference
Explore the complete API documentation
Examples
Browse more examples and use cases