compose-html-ext/com.varabyte.kobweb.compose.css/boxShadow

boxShadow

fun StyleScope.boxShadow(value: String)(source)

fun StyleScope.boxShadow(offsetX: CSSLengthNumericValue = 0.px, offsetY: CSSLengthNumericValue = 0.px, blurRadius: CSSLengthNumericValue? = null, spreadRadius: CSSLengthNumericValue? = null, color: CSSColorValue? = null, inset: Boolean = false)(source)

fun StyleScope.boxShadow(boxShadow: BoxShadow)(source)

Creates a box-shadow property with a single shadow. The property accepts either the BoxShadow.None value, the default global keywords, which indicates no shadows, or a list of shadows, created by using BoxShadow.of, ordered front to back.

Usages:

style {
    boxShadow(BoxShadow.None)
}

Will generate:

box-shadow: none

style {
    boxShadow(BoxShadow.Unset)
}

Will generate:

box-shadow: unset

style {
    boxShadow(
        BoxShadow.of(
            offsetX = 0.px,
            offsetY = 1.px,
            blurRadius = 3.px,
            spreadRadius = 1.px,
            color = Colors.Black.copyf(alpha = 0.15f),
        ),
    )
}

Will generate:

box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;

style {
    boxShadow(
        BoxShadow.of(
            offsetX = 0.px,
            offsetY = 1.px,
            blurRadius = 3.px,
            spreadRadius = 1.px,
            color = Colors.Black.copyf(alpha = 0.15f),
        ),
        BoxShadow.of(
            offsetX = 5.px,
            offsetY = 8.px,
            blurRadius = 10.px,
            spreadRadius = (-1).px,
            color = Colors.Black.copyf(alpha = 0.32f),
        ),
    )
}

Will generate:

box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 1px,
            rgba(0, 0, 0, 0.318) 5px 8px 10px -1px;

boxShadow

See also