Gradient Text

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

1. Copy and paste the component into your Framer project file.

2. 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

3. Configure highlight terms to apply gradient effects to specific words within your text

4. 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