Elementor Developers

# Box Shadow Control

Elementor Core Basic

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

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

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

# Arguments

# Return Value

[
	'horizontal' => 0,
	'vertical' => 0,
	'blur' => 10,
	'spread' => 0,
	'color' => 'rgba(0,0,0,0.5)',
]
1
2
3
4
5
6
7

(array) An array containing box shadow data:

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

# Usage














 
 
 
 
 
 
 
 
 
 







<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'custom_box_shadow',
			[
				'label' => esc_html__( 'Box Shadow', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::BOX_SHADOW,
				'selectors' => [
					'{{SELECTOR}}' => 'box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}};',
				],
			]
		);

		$this->end_controls_section();

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Notes

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

← Slider Control →