shadcn.io is not affiliated with official shadcn/ui
Line Shadow Text sets a shadow behind a word that's drawn in fine diagonal lines, like the hatching on a screen-printed poster, a little down and across from the letters. The lines drift slowly through the shadow, catching the eye without moving the word itself.
Use it for a bold headline or one word in it, often in italics: a launch, a hero, a section title. For depth from light and shade instead, use Emboss Text; for hollow letters that fill with colour, Outline Text. It's CSS only: the shadow is the text's own ::after, a copy read from a data attribute, cut into lines by a repeating mask that a keyframe animation the install adds to your stylesheet slides along, with no animation library. With reduced motion the lines hold still.
Installation
Usage
import { LineShadowText } from "@/components/ui/line-shadow-text";<h2>
Ship <LineShadowText text="faster" />
</h2>Demos
Color
shadowColor is the shadow's colour, any CSS colour, including your theme's variables such as var(--primary). By default it's the text's own colour, so it follows the theme in light and dark.
Still
animate={false} holds the lines still, for a printed look with no motion; duration is how long the lines take to drift ten lines on, 8000 ms by default.
Accessibility
Screen readers read the text once: the shadow is generated content with empty alternative text, so it's skipped, and it can't be selected or found with the browser's search. The lines pause while the pointer is over the text, and with reduced motion they don't move. In forced-colors mode the shadow is hidden and the text shows as usual.
FAQ
How are the lines made?
The shadow is a copy of the text in the ::after pseudo-element, filled with the shadow's colour and masked by a tiny repeating gradient: one diagonal line per tile, 0.07em across, so the lines scale with the text. Moving the mask by whole tiles makes the drift loop without a seam.
What size does it need?
A headline's: at body size the lines are finer than a pixel and the shadow reads as a blur. It's at its best from about 36 pixels up, in a bold weight.
Won't screen readers read the text twice?
No. The copy is generated content with empty alternative text (content: attr(data-text) / ""), which screen readers skip. A browser too old for alternative text drops the shadow and shows the text alone.
Does it work in dark mode?
Yes. By default the shadow takes the text's own colour, so it's light on a dark page and dark on a light one.
API Reference
LineShadowText
<span> data-slot="line-shadow-text"
textstring
The text.
animate?boolean
Whether the lines keep drifting through the shadow; false holds them
still.
- Default
true
duration?number
How long the lines take to drift ten lines on, in milliseconds.
- Default
8000
shadowColor?string
The shadow's colour, any CSS colour. By default the text's colour.
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Forwarded to the part.
data-text?string
Mirrors text.
--line-shadow-text-colorstring
The shadow's colour (the text's colour by default).
--line-shadow-text-durationstring
How long the lines take to drift ten lines on (8s).
Related
- Pro
Handcrafted
Emboss Text
DecorativeDepth from light and shade
- Pro
Outline Text
DecorativeHollow letters that fill with colour
- Pro
Paper Cut Text
DecorativeStacked paper that tilts to the pointer
- Pro
Echo Text
DecorativeFainter copies trailing behind
- Pro
Chrome Text
DecorativeA metal finish for a bold headline
- Pro
Chromatic Text
DecorativeRed and cyan copies slip out