An 800-weight heading that scales fluidly from 32px to 64px between mobile and desktop viewports, filled
with an indigo-to-teal gradient using background-clip: text — a common hero-heading treatment on
modern product and portfolio sites.
typoEffect: gradient · typoMinSize: 32 · typoMaxSize: 64 · typoMinVw: 400 · typoMaxVw: 1400 · typoWeight: 800 · typoColor1: #6366f1 · typoColor2: #00d4aaThey solve unrelated problems that commonly show up together on hero headings: clamp()-based fluid sizing avoids a jump at a media query breakpoint, and the gradient fill adds visual weight to what's usually the most prominent text on the page.
It needs the -webkit-background-clip: text prefix for Safari alongside the unprefixed property — this generator's CSS output includes both automatically.
Heavier weights (700-900) show the gradient transition more clearly, since there's more filled glyph area for the color to move across — thin weights can make the gradient hard to perceive.