[ @sdxc/u/effects ]
dropShadow
Applies filter: drop-shadow(...), shadowing the element's rendered shape — a PNG's alpha channel, an SVG icon's outline — with offsets and a blur radius.
import { dropShadow } from "@sdxc/u/effects";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.dropShadow() | css({ "--ui-filter-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)", filter: "... drop-shadow(var(--ui-filter-drop-shadow, 0 0 0 transparent))" }) |
u.dropShadow({ y: "2px", blur: "4px", color: "brand" }) | css({ "--ui-filter-drop-shadow": "calc(var(--ui-spacing, 0.25rem) * 0) 2px 4px var(--ui-brand-border)", filter: "... drop-shadow(var(--ui-filter-drop-shadow, 0 0 0 transparent))" }) |
Examples
Basic example
Use dropShadow() to shadow the shape an element draws — an SVG icon or a transparent image — and pass y and blur to make it deeper:
<div mix={[...]}>
<div mix={[...]}>
<svg viewBox="0 0 24 24" mix={[dropShadow(), ...]}>
<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>
<span mix={[...]}>default</span>
</div>
<div mix={[...]}>
<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 2, blur: 3 }), ...]}>
<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>
<span mix={[...]}>y: 2, blur: 3</span>
</div>
<div mix={[...]}>
<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 4, blur: 6 }), ...]}>
<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>
<span mix={[...]}>y: 4, blur: 6</span>
</div>
</div>Setting the offset and color
Pass x, y, blur and a theme color to shape the shadow, from a hard offset to a soft glow:
<div mix={[...]}>
<div mix={[...]}>
<svg
viewBox="0 0 24 24"
mix={[dropShadow({ x: 1, y: 1, blur: 0, color: "neutral.strong" }), ...]}
>
<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>
<span mix={[...]}>hard offset</span>
</div>
<div mix={[...]}>
<svg
viewBox="0 0 24 24"
mix={[dropShadow({ y: 0, blur: 3, color: "brand.solid" }), ...]}
>
<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>
<span mix={[...]}>glow</span>
</div>
</div>Compared to a box shadow
shadow() shadows the element's rectangular box, while dropShadow() follows what is actually drawn:
<div mix={[...]}>
<div mix={[...]}>
<svg viewBox="0 0 24 24" mix={[shadow("lg"), ...]}>
<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>
<span mix={[...]}>shadow("lg")</span>
</div>
<div mix={[...]}>
<svg viewBox="0 0 24 24" mix={[dropShadow({ y: 2, blur: 3 }), ...]}>
<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>
<span mix={[...]}>dropShadow()</span>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.dropShadow())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.dropShadow())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.dropShadow(options?: DropShadowOptions)