Gradient Text
Create stunning gradient text effects with customizable colors, responsive design, and advanced styling controls for any web project.
Make it with Workshop
Build your own component with AI
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.
Instructions
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
How It Works
The component features 8 main control groups that handle different aspects of your gradient text:
Content Controllers (3)
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 Controllers (3)
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°)
Color Controllers (2)
Preset Palettes: 6 professionally designed color combinations
Custom Color Palette: Create up to 8 custom colors with automatic even distribution
Typography Controllers (4)
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
Key Features
Advanced Gradient System
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
Responsive & Accessible
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
Professional Styling Options
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
Performance Optimized
Efficient re-rendering with React useMemo optimization
Lightweight codebase with no external dependencies
Production-ready with comprehensive error handling
License
Personal Use License: This component is free for personal use only. You can use it in personal projects, learning exercises, and non-commercial applications.
Commercial License Required: For commercial projects, client work, or any revenue-generating applications, please purchase a commercial license at: BUY LINK
By using this component, you agree to these licensing terms. Commercial use without a proper license is prohibited.
Made with ❤️ by Nitso
