Text Shadow Control

Elementor Core Basic

Elementor Text Shadow control displays an input fields for horizontal shadow, vertical shadow, shadow blur and shadow color.

The control is defined in Control_Text_Shadow class which extends Control_Base_Multiple class.

When using this control, the type should be set to \Elementor\Controls_Manager::TEXT_SHADOW constant.

Arguments

Return Value

[
	'horizontal' => 0,
	'vertical' => 0,
	'blur' => 10,
	'color' => 'rgba(0,0,0,0.3)',
];

(array) An array containing text shadow data:

• $horizontal (int) Text shadow horizontal size.
• $vertical (int) Text shadow vertical size.
• $blur (int) Text shadow blur.
• $color (string) Text shadow color.

Usage

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'custom_text_shadow',
			[
				'label' => esc_html__( 'Text Shadow', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::TEXT_SHADOW,
				'selectors' => [
					'{{SELECTOR}}' => 'text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};',
				],
			]
		);

		$this->end_controls_section();

	}

}

Notes

Please not that developers should not use this control rather the Text Shadow Group Control.