LMSCrafter Gradient Text for Elementor

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 focused plugin adds two dedicated gradient text widgets and optional gradient controls for Elementor’s Heading, Text Editor, and Button widgets. Choose a preset, build a multi-stop gradient visually, or reuse a centrally managed Brand Gradient. No custom CSS or Elementor Pro is required.

Why Choose LMSCrafter Gradient Text for Elementor?

Most gradient text solutions require Elementor Pro custom CSS or a large general-purpose addon suite. This plugin stays focused on gradient text for Elementor and the controls needed to make it reusable, responsive, and readable.

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 – Icy blue gradient
• Rose Gold – Warm metallic blush
• Midnight – Dark teal
• Candy – Purple to cyan
• Neon – Electric green to blue
• Peach – Peach to coral
• Royal – Deep purple
• Bubblegum – Playful pink
• Aurora – Cyan to green
• Cyber – Vibrant pink to purple (3-color)
• Warm Flame – Orange flame
• Mango – Yellow to orange

Full Customization

• Visual Gradient Builder – Add, reorder, color, and position 2-5 stops while the Elementor canvas previews the result
• Saved Brand Gradients – Manage reusable linear, radial, and conic gradients centrally, including Elementor Global Color references and JSON import/export
• Existing Elementor Widgets – Opt in from the Style tab of Heading, Text Editor, and Button widgets without replacing their content
• Custom Gradient Colors – Pick your own colors with up to 5 color stops
• Linear, Radial & Conic Gradients – Control angle, radial shape, and radial position
• Multiple Highlighted Phrases – Build an ordered heading from plain and gradient segments
• Gradient Pill Effect – Add a gradient pill background behind highlighted words
• Gradient Underline – Thick gradient underline bar beneath highlighted words
• Gradient Marker – Highlighter pen effect on highlighted words
• Gradient Glow – Soft gradient glow effect behind highlighted words
• 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
• Responsive Motion – Change direction or pause animation by device
• Accessible Fallbacks – Solid fallback colors, keyboard focus, reduced-motion support, and forced-colors readability
• 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 dependency, no external API calls, and one WordPress option for saved Brand Gradients
• Frontend effects use CSS; a small JavaScript helper is loaded only in the Elementor editor for live preview
• Designed to inherit normal theme typography and work alongside standard Elementor widget markup

Support

Need help? Visit our Support Center for documentation and assistance.

For Developers

The plugin exposes a lmsc_gte_preset_gradients filter so theme and plugin authors can register custom presets without forking:

add_filter( 'lmsc_gte_preset_gradients', function ( $presets ) {
    $presets['brand'] = [
        'label'  => __( 'Brand', 'my-theme' ),
        'colors' => [ '#0a3d62', '#3c6382' ],
    ];
    return $presets;
} );

A “Gradient Text” dynamic tag is also registered under Elementor’s Site group. Use it in text fields that preserve dynamic-tag HTML output; fields that deliberately escape HTML will show plain markup instead. The plugin now loads its shared fallback stylesheet even when a page uses only the dynamic tag or a preset utility class.