Gradient Text is a powerful and customizable React component designed for creating vibrant, eye-catching gradient text effects.
This professional-grade component supports multiple HTML semantic tags and offers an intuitive property panel with comprehensive options to choose gradient types, apply curated color palettes, customize typography, and add advanced visual effects like shadows and outlines.
Perfect for modern web design projects, this component ensures high performance while being fully responsive.
Copy and paste the component into your Framer project file.
Customize the component's appearance by adjusting the properties in the right-hand panel:
Set your text content and choose the appropriate HTML tag
Select gradient type (linear or radial) and direction
Choose from preset color palettes or create custom color combinations
Customize typography, shadows, and outline effects
Configure highlight terms to apply gradient effects to specific words within your text
Fine-tune visual effects using the text styles panel for shadows and outlines
The component features 8 main control groups that handle different aspects of your gradient text:
Content Input: Text area for entering your content
Element Type: Choose from 9 HTML tags (h1-h6, p, span, div)
Highlight Terms: Specify which words receive the gradient effect
Gradient Type: Switch between linear and radial gradients
Color Source: Choose between curated presets or custom palettes
Gradient Direction: Control angle for linear gradients (0-360°)
Preset Palettes: 6 professionally designed color combinations
Custom Color Palette: Create up to 8 custom colors with automatic even distribution
Font Controls: Complete typography management (size, weight, spacing, alignment)
Base Text Color: Color for non-highlighted text
Text Shadow: Add drop shadow effects with position and blur controls
Text Outline: Create stroke effects with customizable width and color
Dual gradient types: Linear and radial with precise direction control
Curated color presets: 6 professionally designed palettes (Sunset, Ocean, Rainbow, Neon, Forest, Fire)
Custom color support: Create up to 8-color gradients with automatic distribution
Fully responsive design that adapts to any container size
Automatic accessibility features with ARIA labels and descriptions
Cross-browser compatibility with CSS fallbacks for older browsers
Semantic HTML support for proper SEO and accessibility
Advanced typography controls with extended font options
Text shadow effects with customizable offset, blur, and color
Text outline/stroke with adjustable width and color
Smart word highlighting with case-insensitive matching
Efficient re-rendering with React useMemo optimization
Lightweight codebase with no external dependencies
Production-ready with comprehensive error handling
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at creator.nitso@gmail.com. I'm here to help.
Soyeb
