Text Shadow

Dynamic shadow effects on text

$ npx @hritik-sharmaa/repeat-ui add text-effect-text-shadow
Category
Text Effect
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview

Hover me

Customize
4
3px
72px
import TextEffectTextShadow from "@/components/repeat-ui/text-effect-text-shadow/preview";

<TextEffectTextShadow text="Hover me" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-text-shadow --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-text-shadow/.

    import TextEffectTextShadow from "@/components/repeat-ui/text-effect-text-shadow/preview";

export default function Page() {
  return <TextEffectTextShadow />;
}

Props

PropTypeDefaultDescription
textstring"Hover me"The text.
colorstring"#f6aca2"Text colour.
shadowColorstring"#ee6352"Colour the shadow stack blends towards.
depthnumber4Number of shadow layers.
stepnumber3Pixels between layers.
fontSizenumber72Text size in pixels; shrinks on narrow screens.
classNamestring""Extra classes for the root element.

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations