[ @sdxc/u/effects ]
backdropDropShadow
Shadows the shapes showing through the host.
import { backdropDropShadow } from "@sdxc/u/effects";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.backdropDropShadow() | css({ "--ui-backdrop-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) calc(var(--ui-spacing, 0.25rem) * 1) calc(var(--ui-spacing, 0.25rem) * 2) rgb(0 0 0 / 0.15)", backdropFilter: "... drop-shadow(var(--ui-backdrop-drop-shadow, 0 0 0 transparent))" }) |
u.backdropDropShadow({ y: "2px", blur: "4px", color: "brand" }) | css({ "--ui-backdrop-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) 2px 4px var(--ui-brand-border)", backdropFilter: "... drop-shadow(var(--ui-backdrop-drop-shadow, 0 0 0 transparent))" }) |
Examples
Basic example
Use backdropDropShadow() to shadow the shapes showing through an element. It traces what is painted inside the nearest backdrop root, like a parent with willChange("filter"):
<div mix={[...]}>
<div mix={[...]}>
<div mix={[zstack(), willChange("filter")]}>
<svg viewBox="0 0 24 24" mix={[...]}>
<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
</svg>
<div mix={[backdropDropShadow(), ...]} />
</div>
<span mix={[...]}>default</span>
</div>
<div mix={[...]}>
<div mix={[zstack(), willChange("filter")]}>
<svg viewBox="0 0 24 24" mix={[...]}>
<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
</svg>
<div mix={[backdropDropShadow({ x: 2, y: 2, blur: 1 }), ...]} />
</div>
<span mix={[...]}>x: 2, y: 2, blur: 1</span>
</div>
</div>Changing the color
Pass a theme color to tint the traced shadow, like color: "brand":
<div mix={[...]}>
<div mix={[...]}>
<div mix={[zstack(), willChange("filter")]}>
<svg viewBox="0 0 24 24" mix={[...]}>
<path d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z" />
</svg>
<div mix={[backdropDropShadow({ y: 2, blur: 2, color: "brand" }), ...]} />
</div>
<span mix={[...]}>color: "brand"</span>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.backdropDropShadow())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.backdropDropShadow())Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
p(4)Customizing colors
Define a palette as --ui-color-{name}-{50..950} and map a tone onto it with the --ui-{tone}-* variables, the way theme.css maps the built-in ones:
:root {
--ui-color-info-50: oklch(0.97 0.02 230);
--ui-color-info-200: oklch(0.88 0.06 230);
--ui-color-info-500: oklch(0.62 0.16 230);
--ui-color-info-600: oklch(0.52 0.18 230);
--ui-color-info-900: oklch(0.3 0.1 230);
--ui-info-bg-tint: var(--ui-color-info-50);
--ui-info-bg-solid: var(--ui-color-info-600);
--ui-info-fg: var(--ui-color-info-600);
--ui-info-fg-muted: var(--ui-color-info-500);
--ui-info-fg-emphasis: var(--ui-color-info-900);
--ui-info-fg-on-solid: white;
--ui-info-border: var(--ui-color-info-200);
--ui-info-border-strong: var(--ui-color-info-600);
--ui-info-ring: var(--ui-color-info-500);
}declare module "@sdxc/u" {
interface ColorPalettes {
info: true;
}
interface SemanticTones {
info: true;
}
}The new name is then accepted wherever the scale is:
bg("info")Signature
u.backdropDropShadow(options?: BackdropDropShadowOptions)