← Back to Prompts
Landing

Gradient Text Reveal

A headline whose text fill is revealed gradually through a scrolling gradient mask.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a large headline with a scroll-driven gradient text reveal. The text should start dim or transparent and become fully visible as the user scrolls, with a gradient "light" moving across the letters. Use background-clip: text, a long animated gradient background, and tie the background-position to scroll progress (CSS scroll-driven animation or JS). Use a dark background and a bold sans-serif font. Use Tailwind CSS.
Chinese Prompt
创建一个带滚动驱动渐变文字显现的大标题。文字应从暗淡或透明开始,随用户滚动逐渐完全可见,一道渐变"光"扫过字母。使用 background-clip: text、长动画渐变背景,并将 background-position 与滚动进度绑定(CSS 滚动驱动动画或 JS)。使用深色背景和粗体无衬线字体。使用 Tailwind CSS。
Gradient Text Reveal screenshot 1
## Overview A scroll-linked headline reveal that turns reading into a slow unveiling. Great for editorial and story-driven pages. ## Features - Scroll-driven text visibility - Moving gradient light - background-clip: text - Dark background - Bold sans-serif - CSS or JS scroll binding ## Usage Use for long-form landing pages, manifestos, or story sections. ## Customization Modify the prompt to: - Reveal word-by-word instead of gradient sweep - Add a subtle blur during the reveal - Use a serif font for editorial mood - Reverse direction (dim on scroll)