Line Shadow Text
Dimensional heading text with a moving linear shadow.
Duplicates the text with attr(data-text) as a shadow, fills it with a 45° diagonal stripe gradient, and flows it along the diagonal, giving the heading a sense of dimensional light and shade.
Loading preview…
npx shadcn@latest add https://webberui.com/r/line-shadow-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
12
<LineShadowText />
Installation
npx shadcn@latest add https://webberui.com/r/line-shadow-text.jsonOr, once registries are configured in components.json, install it as @webberui/line-shadow-text.
Usage
import { LineShadowText } from "@/components/ui/line-shadow-text";
<h1 className="text-6xl font-bold">
Ship <LineShadowText text="faster" shadowColor="#6366f1" />
</h1>By default the shadow inherits the text's own color (currentColor) and follows the light/dark theme automatically; shadowColor can also set a contrasting color for a neon look.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to render, also written into data-text for the shadow layer to duplicate |
as | React.ElementType | "span" | The tag to render, for example "h1" |
shadowColor | string | currentColor | Color of the shadow stripes, which follows the theme automatically |
duration | number | 12 | Time for one full pass of the linear light flow (seconds) |
offset | string | "0.04em" | Offset of the shadow relative to the body text (a CSS length) |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the shadow stops flowing while keeping its dimensional look
- The shadow layer is produced by a CSS
::afterand never enters the accessibility tree, so the complete text is announced only once