Lightweight library adding customizable, smooth shadow effects to composables with color or shader fills, blur, spread, translation controls, shape-aware rendering and Modifier/DrawScope extensions.
A lightweight Compose Multiplatform library providing customizable shadow effects — supporting both solid colors and shaders (like gradients).
Easily apply smooth, dynamic shadows to your composables with simple Modifier or DrawScope extensions.
| Platform | Targets | Status |
|---|---|---|
| Android | androidTarget |
✅ Supported |
| iOS |
iosArm64, iosX64, iosSimulatorArm64
|
✅ Supported |
| Desktop |
jvm (Windows, macOS, Linux) |
✅ Supported |
| Web |
js (JavaScript/Canvas) |
✅ Supported |
| Web |
wasmJs (WebAssembly) |
✅ Supported |
Add the dependency to your build.gradle.kts:
kotlin {
sourceSets {
commonMain.dependencies {
implementation("dev.stetsiuk:compose-shadow:1.0.1")
}
}
}The Gradle plugin will automatically select the correct platform-specific artifact for each target.
If you're working on a single-platform project (non-KMP), you can use platform-specific artifacts:
dependencies {
implementation("dev.stetsiuk:compose-shadow-android:1.0.1")
}dependencies {
implementation("dev.stetsiuk:compose-shadow-desktop:1.0.1")
}dependencies {
implementation("dev.stetsiuk:compose-shadow-iosarm64:1.0.1") // For devices
implementation("dev.stetsiuk:compose-shadow-iosx64:1.0.1") // For Intel simulators
implementation("dev.stetsiuk:compose-shadow-iossimulatorarm64:1.0.1") // For M1/M2 simulators
}dependencies {
implementation("dev.stetsiuk:compose-shadow-js:1.0.1") // JavaScript
implementation("dev.stetsiuk:compose-shadow-wasm-js:1.0.1") // WebAssembly
}[versions]
compose-shadow = "1.0.1"
[libraries]
compose-shadow = { module = "dev.stetsiuk:compose-shadow", version.ref = "compose-shadow" }Then in your build.gradle.kts:
kotlin {
sourceSets {
commonMain.dependencies {
implementation(libs.compose.shadow)
}
}
}val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.shadow(
fillStyle = ShadowFillStyle.WithColor(Color.Black.copy(0.1f)),
blurRadius = 24.dp,
shape = shape,
spread = 4.dp,
translationX = 0.dp,
translationY = 16.dp
)
.size(200.dp)
.background(Color.White, shape)
)val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.shadow(
fillStyle = ShadowFillStyle.WithShader {
LinearGradientShader(
from = Offset(size.width / 2, 0f),
to = Offset(size.width / 2, size.height),
colors = listOf(Color(0xFF2be4dc), Color(0xFF243484)),
)
},
blurRadius = 24.dp,
shape = shape,
spread = 4.dp,
translationX = 0.dp,
translationY = 16.dp
)
.size(200.dp)
.background(Color.White, shape)
)val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.drawBehind {
drawShadow(
fillStyle = ShadowFillStyle.WithColor(Color.Black.copy(0.1f)),
blurRadius = 24.dp.toPx(),
shape = shape,
spread = 4.dp.toPx(),
translationX = 0.dp.toPx(),
translationY = 16.dp.toPx()
)
}
.size(200.dp)
.background(Color.White, shape)
)Made by @vasyl-stetsiuk
Apache License 2.0. See LICENSE for full details.
A lightweight Compose Multiplatform library providing customizable shadow effects — supporting both solid colors and shaders (like gradients).
Easily apply smooth, dynamic shadows to your composables with simple Modifier or DrawScope extensions.
| Platform | Targets | Status |
|---|---|---|
| Android | androidTarget |
✅ Supported |
| iOS |
iosArm64, iosX64, iosSimulatorArm64
|
✅ Supported |
| Desktop |
jvm (Windows, macOS, Linux) |
✅ Supported |
| Web |
js (JavaScript/Canvas) |
✅ Supported |
| Web |
wasmJs (WebAssembly) |
✅ Supported |
Add the dependency to your build.gradle.kts:
kotlin {
sourceSets {
commonMain.dependencies {
implementation("dev.stetsiuk:compose-shadow:1.0.1")
}
}
}The Gradle plugin will automatically select the correct platform-specific artifact for each target.
If you're working on a single-platform project (non-KMP), you can use platform-specific artifacts:
dependencies {
implementation("dev.stetsiuk:compose-shadow-android:1.0.1")
}dependencies {
implementation("dev.stetsiuk:compose-shadow-desktop:1.0.1")
}dependencies {
implementation("dev.stetsiuk:compose-shadow-iosarm64:1.0.1") // For devices
implementation("dev.stetsiuk:compose-shadow-iosx64:1.0.1") // For Intel simulators
implementation("dev.stetsiuk:compose-shadow-iossimulatorarm64:1.0.1") // For M1/M2 simulators
}dependencies {
implementation("dev.stetsiuk:compose-shadow-js:1.0.1") // JavaScript
implementation("dev.stetsiuk:compose-shadow-wasm-js:1.0.1") // WebAssembly
}[versions]
compose-shadow = "1.0.1"
[libraries]
compose-shadow = { module = "dev.stetsiuk:compose-shadow", version.ref = "compose-shadow" }Then in your build.gradle.kts:
kotlin {
sourceSets {
commonMain.dependencies {
implementation(libs.compose.shadow)
}
}
}val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.shadow(
fillStyle = ShadowFillStyle.WithColor(Color.Black.copy(0.1f)),
blurRadius = 24.dp,
shape = shape,
spread = 4.dp,
translationX = 0.dp,
translationY = 16.dp
)
.size(200.dp)
.background(Color.White, shape)
)val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.shadow(
fillStyle = ShadowFillStyle.WithShader {
LinearGradientShader(
from = Offset(size.width / 2, 0f),
to = Offset(size.width / 2, size.height),
colors = listOf(Color(0xFF2be4dc), Color(0xFF243484)),
)
},
blurRadius = 24.dp,
shape = shape,
spread = 4.dp,
translationX = 0.dp,
translationY = 16.dp
)
.size(200.dp)
.background(Color.White, shape)
)val shape = RoundedCornerShape(24.dp)
Spacer(
modifier = Modifier
.drawBehind {
drawShadow(
fillStyle = ShadowFillStyle.WithColor(Color.Black.copy(0.1f)),
blurRadius = 24.dp.toPx(),
shape = shape,
spread = 4.dp.toPx(),
translationX = 0.dp.toPx(),
translationY = 16.dp.toPx()
)
}
.size(200.dp)
.background(Color.White, shape)
)Made by @vasyl-stetsiuk
Apache License 2.0. See LICENSE for full details.