Shadows are one of the most powerful tools in UI design. They add depth, hierarchy, and realism, helping users understand which elements are interactive and which are background. With Jetpack Compose, adding shadows is more flexible than ever. Whether you’re aiming for a Material Design look, a soft neumorphic UI in Android, or bold neobrutal shadows, Compose has you covered.
Let’s explore practical techniques with short Kotlin snippets.
Drop Shadow
The most common way to add a drop shadow in Jetpack Compose is with Modifier.shadow().
Box(
modifier = Modifier
.size(120.dp)
.shadow(8.dp, shape = RoundedCornerShape(16.dp))
.background(Color.White)
)
This works great for cards, floating buttons, and any elevated surfaces. The shadow automatically respects the shape, giving clean edges.
Inner Shadow
While Compose doesn’t have built-in inner shadows, you can simulate them with overlays and blend modes:
Box {
Content()
Box(Modifier.matchParentSize().drawWithContent {
drawRect(Color.Black.copy(alpha = 0.25f), blendMode = BlendMode.Multiply)
})
}
This trick makes inputs, panels, or containers look inset.
Colored Shadows
Want something beyond grayscale? Add colored shadows in Jetpack Compose for playful or branded effects:
.shadow(
elevation = 12.dp,
ambientColor = Color(0xFF6200EE),
spotColor = Color(0xFF6200EE)
)
Perfect for music apps, playful UIs, or highlighting CTAs.
Animated Shadows
Shadows don’t have to be static—animate them to make interactions feel alive.
val elevation by animateDpAsState(if (pressed) 16.dp else 4.dp)
Box(
modifier = Modifier
.shadow(elevation)
.background(Color.White)
)
This approach is excellent for buttons or cards that respond to user gestures.
Combining Techniques
The real power comes when you layer shadows: a base drop shadow for depth, a colored glow for vibrancy, and maybe an inner shadow for realism. By combining, you can craft truly unique aesthetics.
Realistic Shadows
For Material-inspired shadows, follow elevation guidelines. Higher elevation = larger, softer shadows. Combine this with surfaceTint in Compose Material3 to maintain realism and accessibility.
Neumorphic Shadow
Neumorphism in Android is all about soft, extruded surfaces. In Compose, you can fake this by applying both light and dark shadows around the same element. The result is subtle depth that feels modern and tactile.
Neobrutal Shadows
If neumorphism is soft, neobrutal shadows in Compose are bold. Think exaggerated, high-contrast shadows offset far from the element:
Box(
modifier = Modifier
.size(100.dp)
.offset(6.dp, 6.dp)
.background(Color.Yellow)
.shadow(12.dp, shape = RectangleShape)
)
Great for fun, experimental apps that want to stand out.
Final Takeaway
Shadows in Jetpack Compose are not just cosmetic—they shape perception and guide interaction. From simple drop shadows to animated, neumorphic, or neobrutal designs, you can mix and match to craft unique Android UIs.
👉 Experiment boldly. Shadows are your secret weapon to move from flat design to expressive, modern experiences.
