[ @sdxc/u/effects ]

text-shadow

Applies text-shadow, tracing the glyph forms themselves.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { textShadow } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.textShadow()`	`css({ textShadow: "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.35)" })`
`u.textShadow({ y: "1px", blur: "3px", color: "brand" })`	`css({ textShadow: "calc(var(--ui-spacing, 0.25rem) * 0) 1px 3px var(--ui-brand-border)" })`

Examples

Basic example

Use textShadow() to shadow the letters of an element, and pass y and blur to deepen it:

The quick brown fox

<div mix={[...]}>
	<p mix={[textShadow(), text("3xl"), weight("bold")]}>The quick brown fox</p>
	<p mix={[textShadow({ y: 1, blur: 3 }), text("3xl"), weight("bold")]}>The quick brown fox</p>
	<p mix={[textShadow({ y: 2, blur: 4 }), text("3xl"), weight("bold")]}>The quick brown fox</p>
</div>

Keeping text legible over an image

Shadow light text with textShadow() to keep it readable where it crosses a busy image:

Without a shadow

With textShadow()

<div mix={[...]}>
	<p mix={[fg("color.neutral.50"), text("xl"), weight("bold")]}>Without a shadow</p>
	<p
		mix={[
			textShadow({ y: "1px", blur: "3px" }),
			fg("color.neutral.50"),
			text("xl"),
			weight("bold"),
		]}
	>
		With textShadow()
	</p>
</div>

Changing the color

Pass a theme color to tint the shadow, like color: "brand.solid" for a soft glow:

Launch day

<p mix={[textShadow({ y: 0, blur: 3, color: "brand.solid" }), text("3xl"), weight("bold")]}>
	Launch day
</p>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.textShadow())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.textShadow())

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.textShadow(options?: TextShadowOptions)