Gradient Text Effect
Create eye-catching gradient text with background-clip and animation.
何时使用此配方
Gradient text creates visual impact for headings, hero text, and branding elements. Popular in SaaS landing pages and portfolio sites.
步骤
常见问题
How does gradient text work in CSS?
It uses background: linear-gradient() with -webkit-background-clip: text and -webkit-text-fill-color: transparent to mask the gradient to the text shape.
Is gradient text accessible?
Ensure sufficient contrast between gradient colors and the background. Test with accessibility tools and provide a solid-color fallback.
相关配方
Complete Button Style
Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.
Hero Section Design
Design a stunning hero section with gradient background, flexbox centering, and entrance animation.
Card Component Style
Build a modern card component with shadow, border radius, hover transform, and smooth transitions.
Glassmorphism Effect
Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.