Description
How to Add Gradient Text in Elementor
Looking for a simple way to add gradient text in Elementor without writing CSS or buying Elementor Pro? LMSCrafter Gradient Text for Elementor is the solution.
This lightweight plugin adds two dedicated gradient text widgets to your Elementor editor, one for headings and one for rich text content. Just drag, drop, pick your gradient, and you’re done. No coding, no bloat, no Pro required.
Why Choose LMSCrafter Gradient Text for Elementor?
Most gradient text solutions require either Elementor Pro with custom CSS knowledge, or installing a massive 100+ widget addon suite just for one feature. This plugin does one thing perfectly: gradient text for Elementor, and nothing else.
Two Powerful Widgets
- Gradient Text – Perfect for gradient headings, titles, and short text. Supports H1-H6, p, span, and div tags with optional link wrapping.
- Gradient Text Editor – A full WYSIWYG rich text editor with gradient support. Add gradient effects to paragraphs, bold text, italic text, lists, and any formatted content.
20 Beautiful Preset Gradient Palettes
Get started instantly with curated gradient presets:
- Sunset – Warm orange to pink
- Ocean – Deep blue to cyan
- Forest – Teal to green
- Fire – Red to orange
- Purple Rain – Violet to magenta
- Cherry Blossom – Pink floral
- Northern Lights – Green to blue aurora
- Citrus – Orange to yellow
- Frost – Dark blue to navy
- Rose Gold – Soft pink to magenta
- Midnight – Dark charcoal
- Candy – Purple to cyan
- Neon – Electric green to blue
- Peach – Warm peach tones
- Royal – Deep navy
- Bubblegum – Playful pink
- Aurora – Soft pastel
- Cyber – Vibrant pink to purple (3-color)
- Warm Flame – Soft coral
- Mango – Yellow to orange
Full Customization
- Custom Gradient Colors – Pick your own colors with up to 3 color stops
- Linear & Radial Gradients – Choose gradient type and control the angle
- Animated Gradient – Flowing, shifting gradient animation with speed and direction controls
- Text Stroke Gradient – Apply gradient to text outline for stunning hollow text effects
- Hover Effects – Add a different gradient on hover for interactive text
- Full Typography Control – Font family, size, weight, letter spacing, and text shadow
- Responsive Alignment – Set different alignment for desktop, tablet, and mobile
- Link Support – Make your gradient text a clickable link
Works with Elementor Free
Unlike custom CSS methods that require Elementor Pro, this plugin works with the free version of Elementor. No Pro license needed!
Lightweight & Conflict-Free
- Single-purpose plugin that does one thing perfectly
- Properly namespaced code (prefixed with
lmsc-gte-) to avoid conflicts with themes and other plugins - No jQuery dependencies, no external API calls, no database tables
- Compatible with all WordPress themes and Elementor addons
Support
Need help? Visit our Support Center for documentation and assistance.
Screenshots
Installation
How to Install LMSCrafter Gradient Text for Elementor
- Upload the
lmscrafter-gradient-text-for-elementorfolder to/wp-content/plugins/ - Activate the plugin through the Plugins menu in WordPress
- Make sure Elementor (free or Pro) is installed and active
- Edit any page with Elementor
- Search for “Gradient Text” in the widget panel
- Drag the widget onto your page and start customizing!
FAQ
-
How do I add gradient text in Elementor?
-
Install and activate this plugin, then edit any page with Elementor. Search for “Gradient Text” in the widget panel, drag the widget onto your page, and choose a preset gradient or create a custom one. No CSS knowledge required!
-
Does this gradient text plugin require Elementor Pro?
-
No! This plugin works with the free version of Elementor. You don’t need Elementor Pro to create gradient text.
-
Can I add gradient to paragraph text, not just headings?
-
Yes! The Gradient Text Editor widget provides a full WYSIWYG rich text editor with gradient support. You can add gradient effects to paragraphs, lists, bold text, and any formatted content.
-
Can I use more than two gradient colors?
-
Yes, in custom mode you can enable a third color stop to create multi-color gradients with three colors.
-
Does it support responsive design?
-
Yes, the text alignment can be set independently for desktop, tablet, and mobile devices.
-
Will this plugin slow down my website?
-
No. The plugin is extremely lightweight. It uses pure CSS for gradient rendering with no JavaScript, no jQuery, and no external API calls. Zero impact on page load performance.
-
Will this plugin conflict with my theme or other plugins?
-
No. The plugin uses properly namespaced CSS classes (prefixed with
lmsc-gte-) and PHP functions (prefixed withlmsc_gte_) to avoid conflicts. It does not modify any existing Elementor widgets or WordPress functionality. -
Can I add animated gradient text in Elementor?
-
Yes! Enable the hover effect to create an interactive gradient animation. The text gradient smoothly transitions to different colors when users hover over it.
-
What is the difference between Gradient Text and Gradient Text Editor?
-
Gradient Text is a heading-style widget, perfect for titles, H1-H6 tags, and short gradient text. Gradient Text Editor is a WYSIWYG-based widget, perfect for longer content, paragraphs, lists, and rich formatted text with gradient effects.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“LMSCrafter Gradient Text for Elementor” is open source software. The following people have contributed to this plugin.
ContributorsTranslate “LMSCrafter Gradient Text for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.3.0
- New: Animated gradient effect with flowing color animation (CSS-only, no JavaScript)
- New: Animation speed control (1-20 seconds)
- New: Animation direction control (horizontal, vertical, diagonal)
- New: Text stroke/outline gradient mode (Fill, Stroke, or Both)
- New: Stroke width control (1-10px)
- New: 8 additional gradient presets (Neon, Peach, Royal, Bubblegum, Aurora, Cyber, Warm Flame, Mango)
- Total of 20 curated gradient presets
- Updated prefix references in documentation
1.2.0
- New: Gradient Text Editor widget with WYSIWYG rich text support
- Improved: Color value sanitization for enhanced security
- Improved: Defensive widget loading to prevent fatal errors
- Improved: Full PHPDoc documentation on all functions and methods
- Improved: XSS prevention in editor template
- Added: Security index.php files in all directories
- Added: uninstall.php for clean uninstallation
- Added: Capability checks on admin notices
- Added: Translation support with load_plugin_textdomain
1.0.0
- Initial release
- 12 preset gradient palettes
- Custom gradient with up to 3 color stops
- Linear and radial gradient types
- Hover gradient effect
- Full typography and text shadow controls
- Responsive alignment
- Link support






