Text Shadow

The Text Shadow field adds Elementor’s text shadow control to your custom widget: horizontal and vertical offset, blur, and a color with opacity, applied to whatever text your selector points at. Inside the Master Addons Widget Builder, it is the quickest way to let editors keep a headline readable over a busy photo or give display type a subtle lift.

Text Shadow is a group control, the smallest of the family that includes Typography and Background. The wiring is identical: no token in your CSS, just a Selector option that tells Elementor which element to style.

What the Text Shadow field does #

• Renders Elementor’s text shadow group control, opened from the pencil icon next to the field’s label.
• Horizontal and Vertical offsets place the shadow around the glyphs.
• Blur softens it, from a hard duplicate edge to a wide glow.
• Color includes an alpha channel for realistic, low-opacity shadows.
• Writes the CSS itself to the selector you provide; there is no template token.

Never built a widget before? Start with the Widget Builder overview and come back once you have one open.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• A custom widget open in the Widget Builder editor. Our example is a photo banner widget with an <h2 class="banner-title"> heading sitting on the image.

How to add a Text Shadow field #

In the Widget Builder editor, scroll the fields panel on the left until you find the Text Shadow field, listed with the other style group fields such as Typography and Box Shadow.

Drag it into a section under the Style tab, usually right beside the Typography field that styles the same text. Once it lands, the field’s options open on the left.

Text Shadow field options explained #

• Label: the text shown next to the control in Elementor, for example “Title Shadow”.
• Name: the unique identifier for the field, letters, numbers, and underscores only.
• Selector: the CSS selector the shadow applies to. This is the connection itself, covered next.
• Exclude: removes individual sub-controls from the group when you want a trimmed-down popover.
• Description, Show Label, Separator, and Conditions are the standard display options you have seen on other fields.

Point the field at your selector #

Like the other group controls, the Text Shadow field has no {{shortcode}} for your CSS. The shadow bundles offsets, blur, and color into one property, so a {{ token }} for the field prints nothing useful. The Selector option carries the whole connection.

For the banner heading, the selector is:

{{WRAPPER}} .banner-title

• {{WRAPPER}} stands for the widget’s own container, keeping the shadow inside this widget. Group controls apply the selector as written, so {{WRAPPER}} is yours to type; it is not added for you.
• .banner-title is the text element inside your widget HTML.

Watch out: skip {{WRAPPER}} and the selector styles every .banner-title across the page, including ones in other widgets. The setup mirrors the Typography field exactly, so a selector that works there works here.

If the design calls for a default shadow, keep it in the widget’s CSS tab as a fallback. The control overrides it once an editor sets values.

Use the Text Shadow control in Elementor #

Add your custom widget to a page in Elementor, or reload the editor if it was already open. The control shows your label and a pencil icon that opens the shadow popover.

Pick a color, then adjust Blur and the two offsets. A dark shadow at low opacity with a couple of pixels of blur keeps a headline legible over photography; larger offsets with zero blur produce a retro display effect. The preview updates with each change. Tune the result against the lightest photo the site is likely to use, not just the demo image, because a shadow dialed in on a dark background can vanish completely on a bright one.

Common use cases #

• Headings over photos in hero and banner widgets, where the shadow buys back contrast.
• Text on video backgrounds, which shift constantly and need the extra edge.
• Display type effects such as hard offset shadows on large numerals.
• Light text on light imagery, where a soft dark halo keeps captions readable.
• Badges and labels sitting on gradients or patterned areas.

Tips for working with the Text Shadow field #

• The Selector option is the whole connection. No token exists for group controls, so nothing goes in the CSS tab for this field.
• Always start the selector with {{WRAPPER}}. It is used raw, and without it the shadow reaches every matching element on the page.
• Pair it with a Typography field on the same selector. Font and shadow decisions for one heading then sit together in the panel.
• Favor low-opacity colors. Shadows built from the color’s alpha channel sit into the design; solid black rarely does.
• Use Exclude to simplify. If a widget only ever needs blur and color, trimming the group keeps the popover small.
• Ship a fallback in the CSS tab when the default design depends on the shadow being there.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Text Shadow field is a small control that solves a recurring problem: text that has to stay readable no matter what image an editor drops behind it. Name the field, set the Selector to {{WRAPPER}} plus the text’s class, and the shadow lives in the panel from then on. It shares its selector model with the Typography field, which usually belongs on the same heading anyway. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.