Text Shadow

The Text Shadow control adds a text-shadow group to your custom widget. When someone edits the widget, they get a Color picker plus Blur, Horizontal, and Vertical sliders, the same text-shadow popover you already use on native Elementor headings and text. Set the selector once, and Master Addons writes the matching CSS to whatever text you point it at.

You add it in the Widget Builder, give it a name, and aim its Selector at the element holding your text. Like the Border control, this one is a style control: it does not print a shortcode value, it compiles to CSS on the front end.

Screenshot: the Text Shadow control settings panel showing Label, Name, Description, Default Value, and Common Settings. Upload text-shadow-control-settings.png here.

What the Text Shadow control adds to your widget #

Once it is in place, whoever edits your custom widget gets a Text Shadow toggle. Open it and a small popover appears with the standard Elementor shadow fields:

• Color: the shadow color, including global and custom colors.
• Blur: how soft the shadow is. Higher numbers spread it out, lower numbers keep it tight.
• Horizontal: shifts the shadow left or right of the text.
• Vertical: shifts the shadow up or down.

Screenshot: the Text Shadow popover inside an Elementor widget showing Color, Blur, Horizontal, and Vertical sliders. Upload text-shadow-control-frontend.png here.

Why would someone use it in a custom widget? #

Shadows on text are easy to overdo, but a subtle one earns its place: lifting a heading off a busy background image, or giving a hero title a bit of depth without dropping in a separate graphic. Hardcode it and nobody can adjust it per project. Hand the editor a Text Shadow control instead, and they tune the color, blur, and offset right from the panel.

• Let editors style text shadows without touching CSS.
• Match Elementor’s native shadow UI, so the control feels familiar from the first click.
• Reuse one widget across sites in white-labeled builds, since each project can dial in its own shadow.

Where This Option Appears #

• Inside the Widget Builder, on the Content tab, when you add a new control to your custom widget.
• The Text Shadow popover it generates shows up in the widget’s settings for whoever edits the widget.
• The shadow itself renders on the front end, applied to the element named in the control’s Selector.

Available Settings #

Here is every field in the Text Shadow control panel, in the order it appears.

Label #

The text that appears above the control in the panel, something like “Heading Shadow.” The helper note reads: The label that appears above of the field.

Name #

The unique identifier for the control. It can only contain letters, numbers, and underscores (_). Keep it distinct from your other controls, like text_shadow.

Description #

Optional helper text that shows below the field. Use it to say which text the shadow applies to, like “Shadow for the hero title.” The helper note reads: The description that appears below the field.

Default Value #

The shadow the control starts with before the editor changes anything. Leave it blank for no default, or set one so a fresh widget already carries a sensible shadow.

Common Settings #

• Show Label: toggles whether the label text is displayed.
• Label Block: when on, the label sits on its own full-width line instead of inline.
• Responsive Control: enable a different shadow per device (desktop, tablet, mobile).
• Dynamic Support: enable dynamic content support so the value can come from a dynamic source.
• Frontend Available: make the control value available to front-end JavaScript. Leave it off unless your widget’s JS needs to read the shadow value.
• Separator: set the position of the separator line, either None, Before, After, or Default.
• Conditions: show this control only when another control matches a value. The condition row takes a Control Name, an Equality (Equal, Not Equal), and a Control Value.
• Control Classes: add custom CSS classes to the control wrapper in the panel.

Selector #

This is the field that does the real work. The Selector tells Master Addons which text gets the shadow. The default is {{WRAPPER}} .control-class, where {{WRAPPER}} is the widget’s outer wrapper. Swap .control-class for the class of the element holding your text, like {{WRAPPER}} .hero-title. The color, blur, and offset the editor picks get written as a text-shadow rule on that selector.

How the Shadow Renders #

The Text Shadow control does not generate a shortcode you drop into the HTML panel. It is a style control, so it works through the Selector instead. Whatever shadow the editor sets gets compiled into a CSS text-shadow property and attached to the selector you defined. Point the selector at the right text element and the shadow lands there, nothing else to wire.

How to Use It: A Practical Example #

Say your custom “Hero” widget has a title with the class hero-title, and you want the editor to control its shadow:

1. Open your widget in the Widget Builder and go to the Content tab.
2. Add a Text Shadow control. Set its Label to Title Shadow and its Name to title_shadow.
3. In the Selector field, enter {{WRAPPER}} .hero-title so the shadow lands on the title.
4. Turn on Responsive Control if you want a lighter shadow (or none) on mobile.
5. Set a Default Value if you want the title to start with a soft shadow out of the box.

Now anyone editing the widget can set the shadow color, soften it with Blur, and nudge it with Horizontal and Vertical, and it shows on the title right away.

Common Use Cases #

• Hero titles that sit over a background image and need contrast.
• Headings where a soft shadow adds depth without a separate graphic.
• Button or badge labels that need to stand off their background.
• Overlay text on cards, sliders, or banners.
• Any text you want shadowed differently per breakpoint using the responsive option.

Helpful Tips #

• Get the Selector right first. Nine times out of ten, a shadow that does not show up is just a selector that does not match real text in your widget’s markup. Inspect the element on the front end and confirm the class is there.
• Start the selector with {{WRAPPER}} so the shadow stays scoped to this widget and does not bleed onto other text on the page.
• Go light. A small blur with a low-opacity color reads as depth; a hard black shadow reads as a mistake. Keep Horizontal and Vertical to a few pixels.
• Turn on Responsive Control when a shadow that works on a big desktop hero looks heavy on a small phone screen.
• Pair Text Shadow with a Color or Typography control so editors get full say over how the text looks.

The Text Shadow control is one of the style building blocks in the Widget Builder. Drop it in, point the selector at your text, and your custom widget gets the same text-shadow controls editors expect from native Elementor, without you writing a line of CSS.

Frequently Asked Questions #