Glass Text

Text

About

A headline text component that renders each glyph as a bevelled liquid-glass lens, refracting whatever image or gradient sits behind it with rim light and an optional travelling sheen.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Text to your project and fits it to your theme.

Code

How Glass Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlassText } from "@/components/ui/glass-text";

export default function GlassTextDemo() {
  return (
    <div
      className="relative flex min-h-[420px] w-full items-center justify-center overflow-hidden rounded-3xl"
      style={{
        background: `
          radial-gradient(40% 55% at 18% 25%, #ff8ac2 0%, transparent 70%),
          radial-gradient(45% 60% at 82% 20%, #7aa8ff 0%, transparent 70%),
          radial-gradient(50% 60% at 70% 85%, #ffc46b 0%, transparent 70%),
          radial-gradient(45% 55% at 20% 85%, #8f7bff 0%, transparent 70%),
          linear-gradient(135deg, #ffe3f1, #e1ecff)
        `,
      }}
    >
      <div className="flex flex-col items-center gap-1">
        <GlassText className="text-[104px] leading-none font-black" bevel={0}>
          Opaline
        </GlassText>
        <GlassText
          bevel={0}
          refraction={12}
          shine={false}
          className="text-[40px] font-extrabold tracking-[-0.035em]"
        >
          bends the light
        </GlassText>
      </div>
    </div>
  );
}