Box Shadow

The Box Shadow field puts Elementor’s standard shadow control in your custom widget’s panel: horizontal and vertical offset, blur, spread, color with opacity, and an inset toggle. Inside the Master Addons Widget Builder, it is the field that lets editors lift a card off the page, soften a button, or recess an input without touching the stylesheet.

Box Shadow is a group control, the same family as Typography and Background. The connection to your widget is a CSS selector, not a token: you tell the field which element it styles, and Elementor writes the shadow there on its own.

What the Box Shadow field does #

• Renders Elementor’s box shadow group control, opened from the pencil icon next to the field’s label.
• Horizontal and Vertical offsets position the shadow around the element.
• Blur and Spread control softness and reach.
• Color includes an alpha channel, which is where most shadow quality comes from.
• Position toggle switches between an outer shadow and inset.
• Writes the CSS itself to the selector you provide; no template token exists.

If you are new to building widgets, the Widget Builder overview is the place to start.

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 testimonial widget whose <article class="quote-card"> should carry an editor-controlled shadow.

How to add a Box Shadow field #

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

Drag it into a section under the Style tab, typically alongside the Border and Dimensions fields in a card-styling section. Once it lands, the field’s options open on the left.

Box Shadow field options explained #

• Label: the text shown next to the control in Elementor, for example “Card 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.
• Fields Options: overrides for the sub-controls inside the group, such as changing a default value the shadow starts from.
• Description, Show Label, Separator, and Conditions are the usual display options.

Point the field at your selector #

Like every group control, the Box Shadow field has no {{shortcode}} for your CSS. A shadow is several values rolled into one property, and a {{ token }} for the field prints nothing useful. The Selector option is the whole connection.

For the testimonial card, the selector is:

{{WRAPPER}} .quote-card

• {{WRAPPER}} stands for the widget’s own container and keeps the shadow scoped to this widget. Group controls use the selector exactly as you write it, so type {{WRAPPER}} yourself.
• .quote-card is the element inside your widget HTML that the shadow lands on.

Watch out: a selector without {{WRAPPER}} matches every .quote-card on the page, so one widget’s shadow settings restyle all of them. Nothing warns you; the styles simply spread.

Keep a fallback shadow in the widget’s CSS tab if the design depends on one. It is the look on first drop, and the control’s values take over once an editor opens the popover.

Use the Box Shadow control in Elementor #

Place the widget on a page in Elementor, reloading the editor if the page was already open. The control shows your label with a pencil icon; clicking it opens the shadow popover.

Set the color first, then pull Blur up and keep the offsets small for the soft card look, or push Vertical up with zero Blur for a hard graphic shadow. Flip Position to inset for pressed-in fields and wells. The preview tracks every change. One layout note: shadows take no space in the flow, so a generous spread can bleed into the sections above and below without moving anything, which is worth checking when the widget sits between tight rows.

Common use cases #

• Cards in testimonial, pricing, and team widgets, where a soft shadow separates the card from the page.
• Buttons that need depth on the default state.
• Image frames, giving photos a lifted, print-like edge.
• Sticky bars and panels where a shadow signals elevation over content.
• Inset form fields, using the inset toggle for a recessed look.

Tips for working with the Box Shadow field #

• The Selector option is the whole connection. There is no box shadow token for the CSS tab; expecting one is the most common dead end with group controls.
• Always start the selector with {{WRAPPER}}. The field uses it raw, and leaving it off spills the shadow onto every matching element on the page.
• Group it with Border and Dimensions. The three fields together make a complete card-styling section in the panel.
• Lean on color alpha, not darkness. A black shadow at 10 to 15 percent opacity reads better than a solid gray one, and it is worth a note in your field’s Description.
• Keep a fallback in the widget CSS. If the design needs a shadow by default, ship it in the stylesheet and let the control override it.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Box Shadow field gives editors real control over depth: one field, one selector starting with {{WRAPPER}}, and the whole shadow popover appears in the panel. It works on the same selector model as the Typography field, so the setup carries straight over between group controls. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.