CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/long-shadow-text

Long Shadow Text

Pure CSS long-shadow heading — letters cast a diagonal ramp shadow that gradient-fades into the bg, like classic flat-design posters.

ReactFont#shadow#long-shadow#typography

Usage

import LongShadowText from '@crazygl/hero-long-shadow-text';

export default function Hero() {
	return (
		<LongShadowText
			heading="LONG SHADOWS"
			shadowAngle={45}
			shadowColor="#5b8def"
			textColor="#ffd86b"
		/>
	);
}

Customise

  • Shadow — shadowLayers (length/smoothness of the ramp), shadowAngle (direction in degrees), shadowColor.
  • Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
  • Backdrop — bgColor or transparentBackground.

Best for

  • Flat-design and retro poster landing pages.
  • Bold brand wordmarks and event splash headers.
  • Editorial or campaign hero sections wanting a graphic, print-like look.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-long-shadow-text
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import LongShadowText from '@crazygl/hero-long-shadow-text';

export default function Landing() {
  return (
    <LongShadowText />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import LongShadowText from '@crazygl/hero-long-shadow-text';

export default function Page() {
  return (
    <section>
      <LongShadowText
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Cursor Shadow Text

The heading casts a real drop shadow whose direction tracks the cursor — like a single fixed light moving across the room.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Text Illuminate

A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.

Paper and Shadow

Your product screenshot, printed on a softly curled sheet of paper resting under warm window light. Leaves drift overhead and cast slow, dappled shadows across the page.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.

Scroll Text Fade

A long block of copy that fades word-by-word as the visitor scrolls — early words go dim, current words pop, future words sit faded.Live customizer

Long Shadow Text

Shadow layers60Angle (deg)45°Shadow colourText colourFont size160pxFontWeight900Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.